javascript - titulos - Destruye todas las herramientas de Bootstrap en una Div.

tooltip html bootstrap

Question

Tengo un div $("#settings") con varias sugerencias de herramientas de arranque asociadas a los elementos secundarios.

Por ejemplo,

<div id="settings" style="display: flex;">
<tbody>
<tr>
<td width="25%" class="left Special" style="font-size:150%">Content:</td>
<td width="5%"></td>
<td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
</tr>
<tr>
<td width="25%" class="left Special" style="font-size:150%">Content:</td>
<td width="5%"></td>
<td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
</tr>
</tbody>
</div>

Quiero hacer $("#settings").tooltip(''destroy'') para deshacerme de todas estas información sobre herramientas al presionar un botón, pero no funciona, supongo que la información sobre herramientas no está realmente en el Configuraciones div, pero dentro de ella.

Sin embargo, también probé $(''#settings'').find(''*'').tooltip(''destroy'') y eso tampoco funcionó.

¿Es por cómo los estoy inicializando?

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

¿Cuál es una forma rápida y fácil de acceder a todas las informaciones sobre herramientas dentro de un div?

Answer 1

A partir de la versión 4 de bootstrap y de acuerdo con la documentación, debe usar dispose as destroy ya no está definido. El ejemplo se da a continuación:

$(''#element'').tooltip(''dispose'')

Answer 2

Inicializó todos los elementos que tienen el atributo data-toggle="tooltip" usando el contenedor de elementos (el cuerpo) a través de la delegación ( fiddle ):

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

así que para deshabilitarlo usando destruir necesitas hacerlo en el cuerpo:

$(''body'').tooltip(''dispose'');

Si quieres hacerlo sin delegación , puedes inicializar cada uno de los elementos ( fiddle ):

 $(''[data-toggle="tooltip"]'').tooltip();

y destruirlo

$(''[data-toggle="tooltip"]'').tooltip(''dispose''); // used in v4
$(''[data-toggle="tooltip"]'').tooltip(''destroy''); // used in v3 and older

Si aún desea inicializar la delegación a través y dejar de trabajar con deshabilitar ( fiddle ):

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

Explicación sobre la diferencia entre destruir y deshabilitar tomada de la respuesta de Jasny :

$(''[rel=tooltip]'').tooltip() // Init tooltips
$(''[rel=tooltip]'').tooltip(''disable'') // Disable tooltips
$(''[rel=tooltip]'').tooltip(''enable'') // (Re-)enable tooltips
$(''[rel=tooltip]'').tooltip(''dispose'') // Hide and destroy tooltips

Esta es la respuesta que obtuve en Bootstraps github . Ya que estás usando delegación (es decir, la opción de selección), creo que solo hay una instancia de información sobre herramientas real (en el cuerpo). Por lo tanto, intentar destruir instancias de información sobre herramientas no existentes en los propios elementos desencadenantes no tiene ningún efecto. Compare la versión no delegada: fiddle

Answer 3

La respuesta elegida destruye la información sobre herramientas, por lo que desaparecen por completo y se deshabilita su funcionalidad.

Si simplemente desea deshacerse de todas las informaciones sobre herramientas a la vez mientras mantiene su funcionalidad, use $(''.tooltip'').remove(); .

Answer 4

Para destruir solo información sobre herramientas dentro de #settings , haga esto:

$(''#settings [data-toggle="tooltip"]'').tooltip(''destroy'');

Answer 5

Tuve una situación en Bootstrap 3 con información sobre herramientas en un <select> donde $(''body'').tooltip(''destroy'') no funcionaría en información sobre herramientas inicializada a través de $(''[data-toggle="tooltip"]'').tooltip({container:''body''}) .

Terminé usando onchange="$(''.tooltip'').remove()" para eliminar todas las informaciones sobre herramientas. Este método funciona donde los métodos BS no lo harían. Espero que ayude a alguien con una situación similar.

Notas

Mi opacity:0 <seleccionar> se colocó sobre un botón BS para utilizar los menús desplegables del SO en lugar de un menú desplegable tradicional de BS. El botón no recibe desplazamiento debido a la superposición, por lo que la información sobre herramientas se agregó a la invisible <selección>

También agregué this.blur() al evento onchange. De lo contrario, la <selección> mantiene el enfoque y evita que la información sobre herramientas se dispare en movimientos repetitivos 👍