jquery - not - Cómo enlazar bootstrap tooltip en elementos dinámicos

tooltip input bootstrap

Question

Cuando usamos información sobre herramientas de Bootstrap, necesitamos escribir algo como esto para tener la funcionalidad de información sobre herramientas:

$(".showtooltip").tooltip();

Pero el problema es que tenemos que volver a ejecutar ese código cada vez que se carga nuevo contenido a través de ajax. ¿Hay alguna forma de ejecutar el código por una vez y aplicar automáticamente la información sobre herramientas cuando se carga un nuevo elemento?

Gracias.

Answer 1

Necesitas usar la propiedad selector . Ver en la documentation :

"Si se proporciona un selector, los objetos de información sobre herramientas se delegarán a los objetivos especificados. En la práctica, esto se usa para habilitar el contenido HTML dinámico para que se agreguen sugerencias sobre herramientas. Vea this ejemplo y un ejemplo informativo ".

Código de ejemplo JS:

$(''body'').tooltip({
    selector: ''.createdDiv''
});

$(''#add-button'').click(function() {
    $(''<div class="createdDiv" data-toggle="tooltip" title="Some tooltip text!">Hover over me</div>'').appendTo(''#container'');
});

DEMO

Answer 2

Prueba esto:

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