Comment lier les info-bulles Twitter Bootstrap aux éléments créés dynamicment?

J’utilise les info-bulles Twitter bootstrap avec javascript comme suit:

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

Mon balisage ressemble à ceci:

  

Cela fonctionne bien, mais j’ajoute des éléments dynamicment et les info-bulles ne s’affichent pas pour ces éléments dynamics. Je sais que c’est parce que je ne lie que .tooltip () une fois que le document est terminé chargé avec la fonctionnalité typique de jquery $(document).ready(function() .

Comment puis-je lier cela aux éléments créés dynamicment? Habituellement, je le ferais via la méthode jquery live (). Cependant, quel est l’événement que j’utilise pour lier? Je ne suis pas sûr de savoir comment connecter le boottrap .tooltip () avec jquery .live ().

J’ai trouvé un moyen de faire en sorte que ce travail ressemble à 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 semble un peu pirate. J’appelle aussi exactement la même ligne .tooltip () dans l’appel $ (prêt). Ainsi, les éléments qui existent lors du premier chargement de la page et correspondent-ils à ce sélecteur se terminent-ils par une infobulle?

Je ne vois aucun problème avec cette approche. Je cherche juste une meilleure pratique ou compréhension du comportement.

Essaye celui-là:

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

Si vous souhaitez initialiser plusieurs configurations d’infobulle, cela fonctionne bien pour moi.

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

Vous pouvez ensuite définir la propriété sur des éléments individuels à l’aide d’atsortingbuts de data .

Pour moi, capturer uniquement l’événement mouseenter était un peu bogué, et l’info-bulle n’était pas affichée / masquée correctement. J’ai dû écrire ceci, et ça fonctionne maintenant parfaitement:

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

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

TL; DR: Une seule ligne de code doit être exécutée dans un événement prêt pour le document:

 $(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é ceci avec Bootstrap 3.0).

Pour moi, cela reproduit le même problème qui se produit avec Paola

Ma solution:

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

J’ai trouvé une combinaison de ces réponses qui m’a donné le meilleur résultat – me permettant de toujours positionner l’info-bulle et de l’attacher au conteneur approprié:

 $('body').on('mouseenter', '[rel=tooltip]', function(){ var el = $(this); if (el.data('tooltip') === undefined) { el.tooltip({ placement: el.data("placement") || "top", container: el.data("container") || false }); } el.tooltip('show'); }); $('body').on('mouseleave', '[rel=tooltip]', function(){ $(this).tooltip('hide'); }); 

HTML pertinent:

  

Plutôt que de le chercher en corps entier. Je pense qu’il est possible d’utiliser l’option de titre dynamic déjà disponible dans de tels scénarios:

 $btn.tooltip({ title: function(){ return $(this).attr('title'); } });