How to bind bootstrap tooltip on dynamic elements

Question

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.

Answer 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

Answer 2

Try this:

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