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 pr

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"]'
});