Tooltip permanece a veces en la página del elemento dentro del deslizante div

Question

Estamos usando un programa de arranque para uno de los proyectos y tenemos un problema con el complemento de información sobre herramientas que se proporciona. En realidad, no es un error en el arranque pero se crea un problema con la situación en que lo estamos usando.

Tenemos una barra deslizadora que se desliza dentro del contenido div. Y botones para ocultar/mostrar el efecto con información sobre herramientas. El efecto deslizante basado en la diapositiva jQuery UI.

La cuestión es:

Cuando hacemos clic en el botón de la barra lateral ocultar, y al mismo tiempo se mueve el ratón fuera del botón activable en el momento de animación de diapositivas, a continuación, algunos momentos la información sobre herramientas no significa que se oculta, y se queda allí en la página.

Esto ocurre también en la barra lateral de la demostración también. Y cuando sucede, se ve muy mal y con errores.

¿Cómo podemos solucionar esto?

Answer 1

contestadas en el foro de arranque de Richard (https://github.com/r1ch0)

Sólo ocultar manualmente la información sobre herramientas cuando se hace clic en el botón, antes de desencadenar la animación de diapositivas.

 

$('#button').on('click', function() { 
    $(this).tooltip('hide') 
    $('#sidebar').slide() // replace with slide animation 
}) 
 

Copiado de: https://github.com/twitter/bootstrap/issues/3446

publicadas aquí sólo porque alguien más lo puede encontrar.

Answer 2

Si está utilizando la punta de la herramienta de arranque, entonces ¿qué hay de la adición de una opción de retardo:

jQuery('#example').popover(delay: { show: 100, hide: 100 }) 

Si la punta de la herramienta es como de una etiqueta alt de una imagen, a continuación, utilizar jQuery para eliminarlo

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery("img").removeAttr("alt"); 
}); 
</script> 

Answer 3

Parece que hay una solución adecuada para esto (una que no implique la limpieza manual) en https://github.com/twitter/bootstrap/pull/4104, con suerte se lanzará pronto.

Answer 4

Utilicé la contribución de Krunal (+1 por cierto), eso me ayudó mucho pero no resolvió completamente el problema.
La información sobre herramientas desaparece cuando hago clic en el botón, pero regresa y se atasca nuevamente cuando mi mouse se mueve sobre él, hasta que hago clic en otro lugar.

Así que me di cuenta de que la información sobre herramientas aparece mientras se cierne , y también mientras se centra un elemento.
Finalmente escribí esto:

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

y funciona bien.
Gracias.