Question

I’m trying to use the Twitter Bootstrap popover plugin to bring up a popover when a <span> element is clicked.

All the files are including on the page, including bootstrap-tooltip.js and bootstrap-popover.js. This is my jQuery code to call the popover:

$('#supported-hosts').popover({
    'animation': true,
    'html': 'test',
    'trigger': 'click'
});

However when I click the element nothing happens. There’s no Javascript error in the developer console or anything.

I’ve also tried doing this to no effect:

$('#supported-hosts').on('click', function() {
    $(this).popover('show');
});

I’m pretty clueless as to what’s wrong because as far as I can tell from the Bootstrap docs I’m using it correctly.

Edit: Also the HTML is simply a span element:

<span id="supported-hosts">Supported filehosts</span>

Answer 1

In order to show a pop-over, you need to indicate what its content should be.

You can do this on the html tag itself:

<span id="supported-hosts" data-content="Popover content">Supported filehosts</span>

Or with JavaScript:

$('#supported-hosts').popover({
    'content': 'Popover content'
    'animation': true,
    'html': 'test',
    'trigger': 'click'
});

By default, the pop-over will use the title attribute of the element that triggers it, so you can use that as well, depending on your needs.