Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter bootstrap .popover not working

I'm trying to get Twitter Bootstrap's .popover working and I've pretty much copied the code on my site, but it tells me Object [object object] has no method 'popover' on inspect element. I've imported jquery before bootstrap-tooltip.js and bootstrap-popover.js and the files do show up in inspect element. Here's the actual button i'm trying to get a popover for:

<a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>

and here's the javascript:

    $(function(){
            $('#example').popover();
    });
like image 416
Gavin Sellers Avatar asked Jun 11 '12 18:06

Gavin Sellers


People also ask

Why are popovers not showing up?

js . Popovers are opt-in for performance reasons, so you must initialize them yourself. Zero-length title and content values will never show a popover. Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).

How do I enable popovers in bootstrap?

To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

Is Popper js required for bootstrap 5?

You must include popper. min. js before bootstrap.

How do I show popover on hover?

To make the image on hover in popover just insert an image as an HTML element to the data-mdb-content and set the data-mdb-html to true .


1 Answers

The problem was that tooltip.js needs to be included before popover.js.

like image 175
Gavin Sellers Avatar answered Oct 03 '22 15:10

Gavin Sellers