jquery - example - ¿Cómo puedo vincular la información sobre herramientas de Bootstrap de Twitter a elementos creados dinámicamente?

tooltip html

Question

Estoy usando información sobre herramientas de arranque de Twitter con javascript como el siguiente:

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

Mi marca se ve así:

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

Esto funciona bien, pero agrego elementos <a> dinámicamente y la información sobre herramientas no se muestra para esos elementos dinámicos. Sé que es porque solo vinculo .tooltip () una vez cuando el documento termina de cargarse con la funcionalidad jquery $(document).ready(function() .

¿Cómo puedo vincular esto a elementos creados dinámicamente? Normalmente lo haría a través del método jquery live (). Sin embargo, ¿cuál es el evento que uso para enlazar? Simplemente no estoy seguro de cómo conectar el bootstrap .tooltip () con jquery .live ().

He encontrado una manera de hacer que este trabajo sea algo como esto:

/* 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();
});

Esto funciona, pero parece un poco hackish. También estoy llamando exactamente a la misma línea .tooltip () en la llamada $ (lista). Entonces, ¿los elementos que existen cuando la página se carga por primera vez y coinciden con ese selector terminan con la información sobre herramientas dos veces?

No veo ningún problema con este enfoque. Sólo estoy buscando una mejor práctica o comprensión del comportamiento.

Answer 1

En lugar de buscarlo en todo el cuerpo. Uno podría usar la opción de título dinámico ya disponible en tales escenarios, creo:

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

Answer 2

Encontré que una combinación de estas respuestas me dio el mejor resultado, lo que me permite ubicar la información sobre herramientas y adjuntarla al contenedor relevante:

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

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

Answer 3

He publicado una respuesta más larga aquí: https://.com/a/20877657/207661

TL; DR: solo necesita una línea de código que se ejecute en un evento preparado para documentos:

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

Otro código más complicado sugerido en otras respuestas no parece necesario (lo he probado con Bootstrap 3.0).

Answer 4

Para mí, este js reproduce el mismo problema que ocurre con Paola

Mi solución:

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

Answer 5

Para mí, solo capturar el evento mouseenter fue un poco defectuoso, y la información sobre herramientas no se mostraba / ocultaba correctamente. Tuve que escribir esto, y ahora está funcionando perfectamente:

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

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

Answer 6

Prueba este:

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

Answer 7

Si tiene varias configuraciones de información sobre herramientas que desea inicializar, esto funciona bien para mí.

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

A continuación, puede establecer la propiedad en elementos individuales utilizando atributos de data .