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.

Answer 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>

Answer 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".

Answer 3

If you want bootstrap tooltip then:

    $(function () {
        $("[rel='tooltip']").tooltip();
    });

If you want Jquery tooltip then:

    /*** Handle jQuery plugin naming conflict between jQuery UI ***/
$.widget.bridge('uitooltip', $.ui.tooltip);

    $(function () {
        $("[rel='tooltip']").uitooltip();
    });

HTML will remain same in both the case:

  <div title="Tooltip text" rel="tooltip"> div data ... </div>