How to get Twitter Bootstrap jQuery Elements (tooltip, popover, etc) working?

Question

I've been playing with the Twitter Bootstrap test page in Dreamweaver and I absolutely can not get any sort of popover, tooltip, or other Bootstrap jQuery goodie to work. I've copied code from the demo page, poured over the source code, have direct links to all the correct JavaScript files, and still nothing. The CSS works fine though, just none of the animation.

The demo page mentions this code for something:

$('#example').popover(options)

But I have no idea what to do with something like that because I didn't see anything like that in any working site.

If anyone could give me any suggestions for the (probably) tiny link I'm missing, I'd greatly appreciate it.

EDIT

I found the following code snippet after posting this:

$(document).ready(function() {
    $("a[rel=popover]")
        .popover({
            offset: 10
        })
        .click(function(e) {
            e.preventDefault()
        })
});

And it got the popovers triggering! I never saw anything like that in the source code of any of the working sites I saw though. Really wish the Bootstrap documentation could have made that tiny detail a bit clearer for new jQuery users like me.

Solution 1

You need to specify an id or class for the element you want to display a popover when it's hovered over. Here's an example:

<div id="example">Some element</div>

<script>
  $('#example').popover({
    title: 'A title!',
    content: 'Some content!' 
  })
</script>

Solution 2

For people coming here from Google:

You can get tooltip and popover to work automatically like the other Bootstrap plugins with the following code:

<script type="text/javascript">
    $(function () {
        $('body').popover({
            selector: '[data-toggle="popover"]'
        });

        $('body').tooltip({
            selector: 'a[rel="tooltip"], [data-toggle="tooltip"]'
        });
    });
</script>

You can then use data attributes like normal:

<a rel="tooltip" title="My tooltip">Link</a>
<a data-toggle="popover" data-content="test">Link</a>
<button data-toggle="tooltip" data-title="My tooltip">Button</button>

This is what the Bootstrap docs mean when it says that the data-api for these plugins are "opt in".

Comments

[Kyle Carlson]

Thanks Calvin! I just happened to find a similar snippet of code as you were responding. Wish the Bootstrap documentation could have made that just a touch more clear.

[Neil Goodman]

Yes, this is a known issue with the latest versions of Bootstrap: github.com/twitter/bootstrap/issues/7163. Please bump that issue on GitHub if you want it to get fixed, it's been sitting in the issue list for a long time now.

[Will]

@KyleCarson, I agree, just had the same problem.

[Dan Dascalescu]

@vfcosta: that issue was fixed in the meantime. Can you please rm your comment? Thanks.

[Dan Dascalescu]

The initialization code recommended by Bootstrap now is different: $(function () { $('[data-toggle="popover"]').popover() })