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

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.

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/

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.

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 :)

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 ...

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

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.

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

También puedes agregar:

onclick="this.blur()"

Solución de trabajo

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

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

},500);    // Hides tooltip in 500 milliseconds
    });

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

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

Esto funciona para mi:

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

});

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

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

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

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í.

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

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

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.

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>

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

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

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");