Comment puis-je lier Twitter Bootstrap des info-bulles pour créer dynamiquement des éléments?

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'ajoute <a> les é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é.

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) d'appel. 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 fois?

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

  • hmm bonne question, est-il utile? github.com/twitter/bootstrap/issues/2374
  • C'est une lecture intéressante, mais je suis le seul à vouloir un seul type d'info-bulle. Je veux juste m'assurer que tout ajoutées dynamiquement les éléments qui correspondent à la bulle d'aide du sélecteur ajoutés, ce qui n'est pas le cas.
  • Grande question. Semble comme une oversite de la part de twitter.
  • Comment les Chrétiens réponse pour vous? Soins à accepter comme correcte?
  • Oui, cette solution fonctionne. Mise à jour de la réponse. Merci pour le rappel.
  • Pas vraiment liée à votre question, mais... je le trouve mauvais style de détourner le rel attribut. Ce n'est pas la sémantique et a été créé il y a dix ans comme un hack. De nos jours, chaque navigateur, qui remontent à plusieurs années soutient data-* attributs et il n'y a pas plus de raison de ne pas les utiliser.

InformationsquelleAutor durden2.0 | 2012-03-31
  1. 484

    Essayez celui-ci: 

    $('body').tooltip({
    selector: '[rel=tooltip]'
});
    • Grand. Cette réponse est la bonne, parce que c'est fondamentalement le substitut de vivre/sur.
    • Curieux, comment ça fonctionne exactement?
    • href="http://twitter.github.com/bootstrap/javascript.html#tooltips" >Si un sélecteur est fourni, l'info-bulle objets seront déléguées à des cibles spécifiées.
    • C'est aussi la solution pour les éléments ajoutés après le chargement de la page par un appel ajax.
    • Ce que je n'aime pas à propos de cette solution est que vous ne pouvez pas avoir plusieurs configuration de bulles. Par exemple, il ne fonctionne pas si vous avez des info-bulles qui sont placés sur le dessus et d'autres qui sont placés sur le fond.
    • utilisez simplement les différents sélecteurs pour les différentes configurations. C'est la bonne solution. Btw, il fonctionne aussi avec une Liste.
    • comment utilisez-vous les différents sélecteurs pour les différentes configurations? J'ai essayé: $("body .mySelector").liste({..}) mais cela ne fonctionne pas. et aussi plusieurs $("body").liste({sélecteur:".mySelector1"}); $("body").liste({sélecteur:".mySelector2"}); ni travaillé
    • Cela fonctionne bien, mais dans mon Google Maps (jquery-ui-plan) de l'application, à l'aide de "corps" que le sélecteur a été l'origine de "quelque chose écureuils" à se produire à l'intérieur de la carte. J'ai utilisé un interne div au lieu de cela, par exemple,$('#map'), et mon problème semble résolu. Cela pourrait aussi aider les lecteurs qui ont la même question que @BZ.
    • Je suis aussi en train d'essayer d'obtenir différentes configurations de travail, mais ils ne le font pas. Exécution de la $("body").tooltip() appel plus d'une fois semble écraser la précédente, même si le sélecteur est différent.
    • Eh bien, cette réponse est assez ancien, @JohnDubya, ne sais pas si quelque chose a changé et qui bootstrap vous utilisez. De toute façon, je doit dire que vous devriez déléguer la configuration de données-quel que soit le domaine dans le champ html. Jetez un oeil à ce violon: jsfiddle.net/carlesso/4Qjcr
    • Oh mon dieu, comment simple. C'est toujours la méthode simple de vous oublier. Soupir. Merci, Enrico, le data-placement attribut doit faire bien, plutôt que de multiples configurations. SMH
    • Comme de JQuery 1.10, "sélecteur:" changé "les articles:". api.jqueryui.com/tooltip
    • bootstrap 3 utiliser $('body').tooltip({sélecteur:'[data-toggle=tooltip]'});
    • la console d'erreur TypeError: c est pas défini.mais fonctionne bien
    • Quelqu'un sait si il y a un gain de performance à l'aide de cette technique?
    • upvoted! comment faire cela sans jquery
    • c'est jQuery...

    InformationsquelleAutor Christian Strang
  2. 130

    Si vous avez plusieurs info-bulle des configurations que vous voulez initialiser, ce qui fonctionne bien pour moi. 

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

    Vous pouvez ensuite définir la propriété sur les différents éléments à l'aide de data attributs.

    • Bon conseil. J'ai dû changer de $("body").tooltip({ sélecteur: '[data-toggle="tooltip"]' });
    • C'est comment il devrait être avec Bootstrap 3. Super!
    • super! pour une utilisation à l'intérieur d'un tableau ajouter conteneur: 'corps' pour éviter de largeur supplémentaire.
    • Cela fonctionne vraiment bien. J'ai essayé tout un tas de trucs sur un tableau dynamique, mais rien de vraiment travaillé jusqu'à présent.
    • fonctionne bien avec bootstrap 4, Merci!
    InformationsquelleAutor rohitmishra
  3. 16

    Pour moi, seule la capture de l'événement mouseenter était un peu buggy, et l'info-bulle n'était pas de montrer/cacher correctement.
    J'ai eu à l'écrire, et il est maintenant fonctionne parfaitement:

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

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});
    • Cela a été très utile insite pourquoi .sur('hover') ne fonctionne pas.
    • C'était tout ce que je nécessaire à l'utilisation de ma mise en œuvre de l'aide handlebars.js. Si je n'étais pas à l'aide de handlebars.js, de la accepté de répondre également travaillé.
    • C'est de cette façon que j'ai utilisé pour ce faire, mais vous perdez beaucoup d'options comme le hover des retards dont vous avez besoin pour mettre en œuvre manuellement avec ce que je pense.
    InformationsquelleAutor Paola Cerioli
  4. 15

    J'ai posté plus de réponse ici: https://stackoverflow.com/a/20877657/207661

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

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

    D'autres plus compliquées code suggéré dans d'autres réponses ne me semble pas nécessaire (j'ai testé cela avec Bootstrap 3.0).

    • C'est la meilleure réponse.
    • Cela a fonctionné pour mon cas. J'ai utilisé un tableau avec Tablesorter 2.26.2 et rempli les valeurs via l'appel Ajax. Le problème est que le code html info-bulle a été affiché comme du texte HTML au lieu du rendu de la sortie. C'est la seule solution qui a fonctionné pour moi dans le premier. +1 et beaucoup de grâce!
    InformationsquelleAutor Shital Shah
  5. 7

    Pour moi, ce js 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');
});
    InformationsquelleAutor Dg Jacquard
  6. 2

    Plutôt que d'effectuer une recherche en plein Corps.
    On pourrait tout de l'utilisation de dynamic titre de l'option déjà disponible dans de tels scénarios, je pense:

    $btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});
    InformationsquelleAutor Jaskaran Singh
  7. 1

    J'ai trouvé une combinaison de ces réponses m'ont donné les meilleurs résultats, ce qui me permet de toujours positionner l'info-bulle et de la joindre à la conteneur:

    $('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 concernés:

    <button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
    <i class="icon-some-icon"></i>
</button>
    InformationsquelleAutor mattgi