Apague la funcionalidad de Tooltip Bootstrap

4 minutos de lectura

avatar de usuario
Lorena Bernardo

Según el documentación es posible desactivar la funcionalidad simplemente haciendo $('body').off('.alert.data-api').
En el caso de información sobre herramientas Intenté lo siguiente desde la consola js $('body').off('.tooltip.data-api') pero no deshabilita la información sobre herramientas en los botones.
¿Alguna pista de cómo preceder?

  • intente excluir el archivo “bootstrap-tooltip.js” de su página. Además, dado que no hace lo que la documentación dice que debería, plantee un problema aquí: github.com/twitter/bootstrap/issues/nuevo

    – robasta

    16 de noviembre de 2012 a las 10:13

avatar de usuario
arnold daniels

No puede deshabilitar la información sobre herramientas de esa manera porque no tiene un detector de eventos en el cuerpo. En su lugar, puede deshabilitar la información sobre herramientas usando el código a continuación.

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

Editar: Para Bootstrap 4, el 'destroy' El comando ha sido reemplazado por el 'dispose' dominioasi que:

$('[rel=tooltip]').tooltip('dispose') // Hide and destroy tooltips in Bootstrap 4 

  • ¿Cómo puedo deshabilitar la información sobre herramientas para un solo elemento y al mismo tiempo habilitar la información sobre herramientas predeterminada del navegador?

    – Rugido Skullestad

    8 de julio de 2013 a las 15:16

  • $('#my-element').tooltip('disable').attr('title', $('#my-element').attr('data-original-title'));

    – Arnold Daniels

    9 de julio de 2013 a las 10:07

  • Jasny, ¿hay alguna forma de hacer lo mismo con un grupo de elementos en miniatura? He intentado reemplazar #my-element con .my-class pero esto obviamente no funciona; aplica el primer título del grupo a todos los elementos del grupo.

    – Jugar a ser Dios

    17 de febrero de 2014 a las 23:05


  • ¡Gracias por su rápida respuesta! Descubrí que podía pedirle a la API de fancybox que use un atributo diferente … de esa manera obtengo información sobre herramientas en miniatura + título en la imagen expandida: jsfiddle.net/vkDcG

    – Jugar a ser Dios

    17/02/2014 a las 23:39

  • para Bootstrap 4, use la información sobre herramientas (‘dispose’) en lugar de la información sobre herramientas (‘destroy’)

    – devonj

    13 de junio de 2017 a las 23:51

avatar de usuario
Caio Tarifa

Puedes intentar:

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

No olvides cambiar el selector. funciona bien para mi… http://jsfiddle.net/D9JTZ/

  • No desvincules el evento. El objeto de información sobre herramientas todavía existe, lo que hace que sea imposible volver a habilitar la información sobre herramientas. Debe desactivarlo o destruirlo por completo.

    – Arnold Daniels

    16 de noviembre de 2012 a las 10:26

  • Tenga en cuenta que debe preceder esa línea con $(‘a[rel=tooltip]’).información sobre herramientas();

    – James Gentes

    10 de noviembre de 2015 a las 23:22

A permanentemente deshabilitar una información sobre herramientas:

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

Para evitar que la información sobre herramientas se muestre al pasar el mouse pero tener la capacidad de volver a habilitarla:

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

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

  • Esto hizo lo que quería (reemplazando destroy con dispose para arranque 4). Estaba ocultando/mostrando elementos principales basados ​​en un elemento secundario que tenía una información sobre herramientas, por lo que la información sobre herramientas terminaría siendo visible, incluso si el elemento principal estuviera oculto. vocación tooltip('dispose') y entonces .tooltip({placement: "top"}) justo después de arreglar el hover roto, pero se aseguró de que la información sobre herramientas aún estuviera habilitada.

    – Sean Breckenridge

    18 de junio de 2020 a las 23:51


avatar de usuario
niños calum

¡Encontré una manera de hacerlo usando CSS! Solo agrega .tooltip { visibility: hidden } a su archivo CSS.

Si desea que su enlace sea accesible sin la información sobre herramientas, simplemente agregue aria-label= "Here's a link description."

¡Espero que esto ayude!

¡También luché con esto, pero se me ocurrió una solución! En mi caso, uso Jquery Sortable que, por supuesto, es molesto cuando tienes información sobre herramientas volando.

Así que hice una variable

var sort="0`;

Y dado que casi todas las sugerencias tienen una función init(), creé

if(window.sort!="1') { // So I'm not sorting
  init.tooltip();
}

¡Entonces, esta puede ser la función de habilitar/deshabilitar más fácil!

¿Ha sido útil esta solución?