Как привязать всплывающую подсказку к динамическим элементам

При использовании всплывающей подсказки Bootstrap нам нужно написать что-то вроде этого, чтобы иметь функциональность всплывающей подсказки:

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

Но проблема в том, что нам нужно повторно запускать этот код каждый раз, когда новый контент загружается через ajax. Есть ли все-таки запустить код за один раз и автоматически применить всплывающую подсказку при загрузке нового элемента?

Спасибо.

Ответ 1

Вам нужно использовать свойство selector. См. В документации :

"Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанных целей. На практике это используется для включения динамического HTML для добавления всплывающих подсказок. См. this и информативный Пример".

Пример кода JS:

$('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

Попробуйте следующее:

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