How to bind bootstrap tooltip on dynamic elements

问题:

When using Bootstrap tooltip, we need to write something like this to have tooltip functionality:

$(".showtooltip").tooltip();

But the problem is, we need to rerun that code every time when new content is loaded via ajax. Is there anyway to run the code for once and auto apply the tooltip when new element is loaded?

Thank you.

回答1:

You need to use selector property. See on the documentation :

"If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See this and an informative example."

JS example code :

$('body').tooltip({
    selector: '.createdDiv'
});

$('#add-button').click(function() {
    $('<div class="createdDiv" data-toggle="tooltip" title="Some tooltip text!">Hover over me</div>').appendTo('#container');
});

DEMO

回答2:

Try this:

$('body').tooltip({
    selector: '[data-toggle="tooltip"]'
});