La información sobre herramientas de Bootstrap no desaparece después de hacer clic en el botón y salir del mouse

115

Tengo un problema con la información sobre herramientas de Bootstrap: cuando hago clic en un botón, la información sobre herramientas permanece incluso si el cursor está fuera del botón. He mirado el manual - la información sobre herramientas de Bootstrap y si hago clic en los botones, veo el mismo problema. ¿Existe alguna solución para solucionar este problema? Probé en el último FF, IE.

Llanto silencioso
fuente
En mi pregunta tampoco funciona en enlace, veamos allí. Existe el mismo problema.
SilentCry

Respuestas:

241

Esto se debe a triggerque no está configurado. El valor predeterminado para el disparador es 'hover focus', por lo tanto, la información sobre herramientas permanece visible después de hacer clic en un botón, hasta que se hace clic en otro botón, porque el botón es focused.

Así que todo lo que tienes que hacer es definir triggercomo 'hover'único. Debajo del mismo ejemplo al que ha vinculado sin persistir la información sobre herramientas después de hacer clic en un botón:

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})  

el ejemplo del documento en un violín -> http://jsfiddle.net/vdzvvg6o/

Davidkonrad
fuente
1
Gracias David, eso realmente funciona. Entendí mal la opción de activación para la información sobre herramientas en último lugar, ahora tengo razón.
SilentCry
1
@SilentCry Solo tenga en cuenta a quién se dirige, activar un "hover" puede no ser siempre fácil / común.
phk
3
@davidkonrad Plataformas móviles, usuarios ciegos. También podría explicar por qué establecen el 'enfoque de desplazamiento' como predeterminado.
phk
2
@phk, bootstrap tiene un problema general al no ser móvil primero, con respecto a las personas ciegas, deberíamos usar aria-atributos. Por cierto, existe una gran herramienta para probar la usabilidad desarrollada para las autoridades canadienses con varios "niveles" que puede cumplir -> achecker.ca/checker/index.php mi país no tiene estos estándares, pero vale la pena cumplirlos de todas formas.
Davidkonrad
1
Es posible que desee echar un vistazo a la respuesta de Karmonik Cola a continuación. Sigue mostrando la información sobre herramientas en foco.
David Stosik
62

Sé que tiene más de un año, pero no pude hacer que esto funcione con ningún ejemplo aquí. Tuve que usar lo siguiente:

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

Esto también muestra la información sobre herramientas de nuevo al pasar el mouse.

Nitai
fuente
1
Esta debe ser la respuesta aceptada y también debe implementarse en la base de código de arranque.
kjdion84
5
Esto fue extremadamente útil para la información sobre herramientas de arranque colocada en botones con un disparador de 'hover' que causa devoluciones de datos asincrónicas (es decir, mostrar paneles modales). Sin esto, la devolución de datos de la pulsación del botón hace que la información sobre herramientas se "atasque" y nunca desaparezca.
bradykey
1
En mi caso, estaba deshabilitando el botón de envío mientras se realizaba una acción ajax. Mientras se ejecutaba el proceso ajax, la información sobre herramientas permanecería ya que el botón estaba deshabilitado. Una vez completado el proceso ajax, el botón volvería a estar "disponible". Activar y desactivar el botón descarta la información sobre herramientas. La solución de Nitai arregló todo. La información sobre herramientas ahora se oculta al hacer clic y aún funciona al pasar el mouse una vez que el botón se vuelve a activar.
HPWD
Estoy de acuerdo con @ kjdion84. He estado luchando hasta que encontré esto
Ahmad
9

Hola, tengo una pequeña solución para este problema. Cuando otras soluciones no funcionen, intente esta:

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

Esta es una solución para arrastrar y soltar también. Así que espero que esto ayude a alguien :)

Nienormalny_
fuente
Solo tenía el problema con los botones de cuadrícula de Telerik Kendo. Cuando hice clic en uno, la información sobre herramientas no se ocultaba. ¡Esto lo resolvió!
John81
8

En mi caso, el problema se reprodujo solo en Internet Explorer: no importa qué elemento (entrada, div, etc.) tenga información sobre herramientas, si se hace clic, la información sobre herramientas permanece mostrada.

encontré algunas soluciones en la web que recomiendan .hide () que la información sobre herramientas en los elementos Haga clic en el evento, pero es una mala idea, volver al mismo elemento, lo mantiene oculto ... en mi caso

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

hizo toda la magia !!! - donde .myToolTippedElement es el elemento que tiene una descripción emergente de Curso ...

Kamornik Cola
fuente
También funciona para mí y tiene la ventaja sobre la solución aceptada de mantener la información sobre herramientas enfocada.
David Stosik
3

en angular 7 con bootstrap 4 y jquery encontré esto y funciona bien. Usé disponer porque destruye no oculta la información sobre herramientas.

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }
Especificaciones
fuente
2

Intente usar en rel="tooltip"lugar de lo data-toggle="tooltip"que funcionó en mi caso. Estaba usando data-toggle="tooltip"y también configuré la condición de activación como hover que no funcionó en mi caso. Cuando cambié mi selector de datos, funcionó.

Código HTML:

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

JS Code // Tooltip $ ('. Btn'). Tooltip ({trigger: 'hover'});

Esto definitivamente eliminará la información sobre herramientas atascada.

Jestino Sam
fuente
2

La respuesta de David anterior ayudó a solucionar mi problema. Tuve un evento de desplazamiento y clic en el botón. Firefox en MAC se comportó como quería. Es decir, mostrar información sobre herramientas al pasar el mouse, no mostrar información sobre herramientas para hacer clic. En otros navegadores y sistemas operativos, cuando hago clic en, la información sobre herramientas aparece y permanece como se muestra. Incluso si muevo el mouse a otros botones para mantener el mouse. Esto es lo que tuve:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true}); 

Esta es la solución:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 
usuario1322977
fuente
2

También puedes agregar:

onclick="this.blur()"
Sergey Koshkin
fuente
1
¿En qué se diferencia esto de lo que ha propuesto Kamornik Cola (excepto por la implementación sin jQuery)? Sugiero agregar alguna explicación para que la respuesta sea útil. Saludos cordiales
YakovL
2

Solución de trabajo

$(document).on("click",function()
    {
    setTimeout(function()
    {

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

},500);    // Hides tooltip in 500 milliseconds
    });
Alfa
fuente
Si bien este código puede responder a la pregunta, proporcionar un contexto adicional sobre por qué y / o cómo este código responde a la pregunta mejora su valor a largo plazo.
Adam
@Adam No pude encontrar ninguna solución funcional en los foros para ocultar una información sobre herramientas después de hacer clic en cualquier <a>, <button> u otros elementos que tengan la funcionalidad de botón o apariencia adjunta.
Alpha
1

La forma en que solucioné este problema fue eliminando la información sobre herramientas en la función de evento de clic con el siguiente código:

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});
soroxis
fuente
1
¿Puede obtener la información sobre herramientas de nuevo al pasar el mouse?
Vishnu
0

Estoy usando información sobre herramientas bootstrap en cycle.js y nada de lo anterior funcionó para mí.

Tuve que hacer esto:

return button( selector + '.btn.btn-sm', 
             {
               hook: {
                 destroy: tooltipOff,
                 insert:  toggleTooltipOn,
               },
....

function toggleTooltipOn(vnode){
  setupJQuery();  
  jQuery[0].$( vnode.elm )
    .tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}

function tooltipOff( vnode ){
  setupJQuery();      
  jQuery[0].$( vnode.elm ).tooltip('hide');
}
Brian C.
fuente
0

Esto funciona para mi:

$(document).ready(function() {
   $('#save').tooltip({
            trigger : 'hover'
        }) ;

});

Estaba deshabilitando el botón Guardar dinámicamente, entonces el problema era.

Devendra Singraul
fuente
Aquí se guarda la identificación de mi botón
Devendra Singraul
0

Dentro de la función de preparación de documentos, utilice esta

 $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip({
               trigger : 'hover'
            });
    });
Siva Ganesh
fuente
0

Esta solución funcionó para mí.

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
  trigger: 'click'
});

$('a[data-toggle="tooltip"]').click(function(event){
  event.stopPropagation();
});

$('body').click(function(){
  $('a[data-toggle="tooltip"]').tooltip('hide');
});

violín

Probé la mayoría de las soluciones dadas en respuestas anteriores, pero ninguna funcionó para mí.

طلحة
fuente
0

Mi problema está en DataTable. El siguiente código funciona para mí.

columnDefs: [ { targets: 0, data: "id", render: function (data, type, full, meta) { return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>'; } } ], drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').on('click', function () { $(this).tooltip('hide'); }); }

POR QUÉ
fuente
0

También puede utilizar el método siguiente para ocultar la información sobre herramientas en el mouseleave , como se muestra a continuación:

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});
Hanuman Sahay
fuente
0

En mi caso, para esto fue la solución:

beforeDestroyingElement() {    
  $('[data-toggle="tooltip"]').tooltip('hide');
}

No estaba obedeciendo esta regla de los documentos de Bootstrap:

La información sobre herramientas debe estar oculta antes de que sus elementos correspondientes se hayan eliminado del DOM.

Gabi L
fuente
0

Esto también se puede lograr en el HTML agregando lo siguiente:

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>
csharpsql
fuente
Lamentablemente, esto no funciona y la información sobre herramientas todavía está bloqueada.
Fwd079
0

También puede usar esta forma para versiones antiguas porque la respuesta aceptada no funcionó para mí y escribí este código para mí y funciona bien.

$(document).on('mousedown', "[aria-describedby]", function() {
    $("[aria-describedby]").tooltip('hide');
});
Guardia Dorada
fuente
0

Si alguien quiere configurar una información sobre herramientas que se mostrará durante algún tiempo después de hacer clic, así es como lo hice:

$('[data-toggle="tooltip"]').tooltip({
trigger : 'click'})  

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})
javadb9
fuente
0

El uso de un desenfoque forzado () tiene la potencia de reducir la experiencia del usuario. Yo no haría eso. Descubrí que eliminar "data-original-title" así como eliminar los atributos "data-toggle" y "title" funcionó para mí.

    $(id).tooltip('hide');
    $(id).removeAttr("data-toggle");
    $(id).removeAttr("data-original-title");
    $(id).removeAttr("title");
Gregory Bolonia
fuente