CambridgeMike CambridgeMike - 1 year ago 979
jQuery Question

Load a Bootstrap popover content with AJAX. Is this possible?

The appropriate bits of what I tried are here:

<a href="#" data-content="<div id='my_popover'></div>"> Click here </a>

$(".button").popover({html: true})


When I click, I see the request get made, but doesn't populate the popover. I don't even see HTML for the popover get added to the DOM, but that could be firebug.

Has anyone tried this?

Answer Source

See my blog post for the working solution:

First we should add a data-poload attribute to the elements you would like to add a pop over to. The content of this attribute should be the url to be loaded (absolute or relative):

<a href="#" title="blabla" data-poload="/test.php">blabla</a>

And in JavaScript, preferably in a $(document).ready();

$('*[data-poload]').hover(function() {
    var e=$(this);'hover');
    $.get('poload'),function(d) {
        e.popover({content: d}).popover('show');

off('hover') prevents loading data more than once and popover() binds a new hover event. If you want the data to be refreshed at every hover event, you should remove the off.

Please see the working JSFiddle of the example.