Bootstrap Popover not displaying

Question

Currently I have a popover set up that is not initialing. My code is as follows:

HTML:

<div data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>

JavaScript:

$(function () {
    $('[data-toggle="popover"]').popover()
})

I've included everything I need to CSS and library wise and managed to replicate the issue here in a fiddle: https://jsfiddle.net/W3R3W0LF666/33rmse7m/

So far I've tried moved the initialization text to various places in the JS file to rule out any hierarchy issues

where have you included the js files on that jsfiddle? you have an error `TypeError: $(...).popover is not a function` the js lib isnt included in that fiddle — atmd, Sep 08 '15 at 10:19
You forgot to include the `CSS` and `JS` of bootstrap, in your fiddle. Maybe same thing in your code ? Working : https://jsfiddle.net/33rmse7m/2/ — w3spi, Sep 08 '15 at 10:20
That fixes the fiddle but still not fixed in my code - in my code the popover is inside a table - would that make a difference? — Web Develop Wolf, Sep 08 '15 at 10:21
@LianeStevenson Can you share your live url, if available? Are you sure you've all the necessary files loaded properly ? It's working on fiddle though. https://jsfiddle.net/tusharkhatiwada/33rmse7m/3/ — Tushar Khatiwada, Sep 08 '15 at 10:24

score 2 · Accepted Answer · answered Sep 08 '15 at 10:25

2

Initialize

$('[data-toggle="popover"]').popover()

Pop it

$('[data-toggle="popover"]').popover('show');

answered Sep 08 '15 at 10:25

Ppp

1,015
9
14

random · Answer 2 · 2015-09-08T10:33:53.570

0

I have updated your code, Check code below JSFiddle :

  $(document).ready(function(){
    $('[data-toggle="popover"]').popover({
         placement : 'bottom'
    });
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button data-toggle="popover" class="btn btn-primary" data-content="xyz">Click Me</button>

edited Sep 08 '15 at 10:33

answered Sep 08 '15 at 10:27

random

7,756
3
19
25

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. – SuperBiasedMan Sep 08 '15 at 11:26

score 0 · Answer 3 · answered Sep 08 '15 at 10:29

Check this one this will help you..

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />


    <!-- Le styles -->
    <link href="style.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

  </head>

  <body>
    <a href="#" data-toggle="popover" title="Popover Header" data-content="XYZ">Toggle popover</a>


    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function(){
          $('[data-toggle="popover"]').popover();   
      });
    </script>
  </body>

</html>

LeftyX · Answer 4 · 2015-09-08T10:35:19.723

You forgot to load the external resources.

From the docs:

How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.

You need to define the trigger data-trigger="hover":

<div data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>

Have a look at this fiddle.

PS: Yours actually works, but it only triggers on-click.

AndrewL64 · Answer 5 · 2015-09-08T10:57:45.017

0

Just wrapped your jQuery script like this:

jQuery(function ($) {
    $('[data-toggle="popover"]').popover();
});

Or if you want to load the script on document ready, then use this:

jQuery(document).ready(function($){
    $('[data-toggle="popover"]').popover();
});

Reason: $ causes name-conflict between jQuery and plain-js/other-libraries hence why you have to call it differently so the browser knows that jQuery and not some other library is using it.

Here's a jsfiddle with above codes: https://jsfiddle.net/AndrewL32/33rmse7m/7/

edited Sep 08 '15 at 10:57

answered Sep 08 '15 at 10:41

AndrewL64

15,794
8
47
79

This is not really his problem. It works even without the [wrapper](https://jsfiddle.net/37p0562f/1/). – LeftyX Sep 08 '15 at 10:54
@LeftyX On jsFiddle, it will work without the wrapper but on browser, he needs to add that wrapper. This guy had the same issue as him: http://stackoverflow.com/questions/31962361/error-uncaught-typeerror-datetimepicker-is-not-a-function/31962549#31962549 – AndrewL64 Sep 08 '15 at 10:56
And so is this guy: http://stackoverflow.com/questions/7975093/typeerror-undefined-is-not-a-function-evaluating-document – AndrewL64 Sep 08 '15 at 10:58

Bootstrap Popover not displaying

5 Answers5