¿Cómo enlazo la información sobre herramientas de Bootstrap de Twitter a elementos creados dinámicamente?

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

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

Mi marcado se ve así:

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

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

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

He encontrado una forma de hacer que esto funcione es 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 hack. También estoy llamando exactamente 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. Solo estoy buscando una mejor práctica o comprensión del comportamiento.

Prueba este:

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

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

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

Luego puede establecer la propiedad en elementos individuales utilizando dataatributos.

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

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

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

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

TL; DR: solo necesita una línea de código que se ejecute en el evento de documento listo:

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

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

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

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

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

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