Comment lier bootstrap info-bulle sur les éléments dynamiques

Question

Lorsque vous utilisez Bootstrap tooltip, nous devons écrire quelque chose comme ça pour avoir des fonctionnalités d'info-bulle:

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

Mais le problème est que nous devons réexécuter ce code à chaque fois que du nouveau contenu est chargé via ajax. Est-il possible d'exécuter le code pour une fois et d'appliquer automatiquement l'info-bulle lors du chargement d'un nouvel élément?

Je vous remercie.

Answer 1

Vous devez utiliser la propriété selector. Voir sur documentation:

"Si un sélecteur est fourni, les objets d'info-bulle seront délégués aux cibles spécifiées. En pratique, il est utilisé pour permettre au contenu HTML dynamique d'avoir des info-bulles ajoutées. Voir this et un exemple informatif . "

Exemple de code 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');
});

DÉMO

Answer 2

Essaye ça:

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