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>