javascript - example - tooltip bootstrap css

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

Question

Tengo un problema con la información sobre herramientas de bootstrap: cuando hago clic en un botón, la información sobre herramientas se mantiene incluso si el cursor está fuera del botón. He examinado el manual: la información sobre herramientas de Bootstrap y si hago clic en los botones, veo el mismo problema. ¿Hay alguna solución para solucionar esto? Acabo de probar en el último FF, IE.

Answer 1

Dentro de su función de documento listo, use esto

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

Answer 2

En mi caso para esto fue la solución:

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

No obedecía 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.

Answer 3

En mi caso, el problema se reprodujo solo en Internet Explorer: no importa qué elemento (input, 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 () esa información sobre herramientas sobre los elementos Haga clic en el evento, pero es una mala idea, desplazarse 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 información sobre herramientas de Curso ...

Answer 4

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

fiddle

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

Answer 5

Esto funciona para mi:

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

});

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

Answer 6

Esto se debe a que el trigger no está configurado. El valor predeterminado para el activador es ''hover focus'' , por lo que 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 está focused .

Por lo tanto, todo lo que tiene que hacer es definir el trigger como ''hover'' . Debajo del mismo ejemplo al que se 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/

Answer 7

Estoy usando la información sobre herramientas de bootstrap en cycle.js y ninguno de los anteriores 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'');
}

Answer 8

Hola, tengo poca solución para este problema. Cuando otras soluciones no funcionan, prueba 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 la solución para arrastrar y soltar también. Así que espero que esto ayude a alguien :)

Answer 9

Intente usar rel="tooltip" lugar de data-toggle="tooltip" que funcionó en mi caso. Estaba usando data-toggle="tooltip" y también configuré la condición de activación como desplazamiento, lo 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>

Código JS // Información sobre herramientas $ (''. Btn''). Información sobre herramientas ({trigger: ''hover''});

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

Answer 10

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

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

Answer 11

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

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

Esta es la solución:

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

Answer 12

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

Answer 13

Sé que tengo más de un año, pero no pude hacer que esto funcione con ningún ejemplo aquí. He tenido 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 cursor.

Answer 14

También puede usar el siguiente método 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();
});

Answer 15

También puedes agregar:

onclick="this.blur()"

Answer 16

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

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

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

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

Answer 17

Solución de trabajo

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});