Comment lier les infobulles Twitter Bootstrap aux éléments créés dynamiquement?

Question

Je suis en utilisant Twitter bootstrap des info-bulles avec javascript comme suit:

$('a[rel=tooltip]').tooltip();

Mon balisage ressemble à ceci:

<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>

Cela fonctionne bien, mais j'y ai ajouté <a> éléments de façon dynamique et les info-bulles ne sont pas affichées pour les éléments dynamiques. Je sais que c'est parce que je ne lient .tooltip() une fois lorsque le document est terminé chargé avec le typique jquery $(document).ready(function() fonctionnalités.

Comment puis-je lier cela à créé dynamiquement des éléments? Généralement je le faire via jquery live() la méthode. Cependant, ce qui est l'événement que j'utilise pour lier? Je ne suis pas sûr de la façon de raccorder le bootstrap .tooltip() avec jquery .live().

J'ai trouvé une façon de faire ce travail est quelque chose comme ceci:

/* Add new 'rows' when plus sign is clicked */
$("a.add").live('click', function () {
    var clicked_li = $(this).parent('li');
    var clone = clicked_li.clone();

    clone.find(':input').each(function() {
        $(this).val('');
    });

    clicked_li.after(clone);
    $('a[rel=tooltip]').tooltip();
});

Cela fonctionne, mais il semble que ce genre de hackish. Je suis aussi de l'appel de la même exacte .tooltip() ligne dans le $(prêt). Oui, les éléments qui existent lorsque la page se charge tout d'abord et la correspondance sélecteur jusqu'à la fin avec l'info-bulle à deux reprises?

Je ne vois pas de problèmes avec cette approche. Je suis à la recherche d'une meilleure pratique ou de compréhension du comportement.

Answer 1

Essaye celui-là:

 $('body').tooltip({
    selector: '[rel=tooltip]'
});
 

Answer 2

Si vous avez plusieurs configurations d'infobulle que vous voulez initialiser, cela fonctionne bien pour moi.

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

Vous pouvez ensuite définir la propriété sur des éléments individuels en utilisant les attributs data .

Answer 3

Pour moi, attraper seulement l'événement mouseenter était un peu bogué, et l'info-bulle ne s'affichait pas correctement. Je devais écrire ceci, et cela fonctionne maintenant parfaitement:

 $(document).on('mouseenter','[rel=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});
 

Answer 4

J'ai posté une réponse plus longue ici: http://stackoverflow.com/a/20877657/207661

TL; DR: Vous n'avez besoin que d'une ligne de code qui s'exécute dans l'événement document prêt:

 $(document.body).tooltip({ selector: "[title]" });
 

D'autres codes plus compliqués suggérés dans d'autres réponses ne semblent pas nécessaires (j'ai testé cela avec Bootstrap 3.0).

Answer 5

Pour moi, ça reproduit le même problème que celui qui se passe avec Paola

Ma solution:

 $(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});