Bootstrap tooltip flashing on hover

Question

Я добавил всплывающую подсказку, но иногда (и только иногда), когда я нависаю над изображением, чтобы показать всплывающую подсказку, изображение просто мигает, не отображая всплывающую подсказку:

Вот мой HTML:

<div class="up"></div> 
<div class="down"></div> 

JQuery:

<script src="assets/js/jquery.js"></script> 
<script src="assets/js/bootstrap-tooltip.js"></script> 
<script type="text/javascript"> 
    $('.up').tooltip({title: '<b>Up</b>', delay: { show: 500, hide: 0 }, trigger: 'hover', html: true}); 
    $('.down').tooltip({title: '<b>Down</b>', delay: { show: 500, hide: 0 }, trigger: 'hover', html: true}); 
</script> 

Что случилось?

Answer 1

Я хотел бы попробовать оборачивать код JS в document.ready так:

$(document).ready(function() { 
$('.up').tooltip({title: '<b>Up</b>', delay: { show: 500, hide: 0 }, trigger: 'hover', html: true}); 
$('.down').tooltip({title: '<b>Down</b>', delay: { show: 500, hide: 0 }, trigger: 'hover', html:true}); 
}); 

Answer 2

Я на самом деле был этот вопрос.

Для меня проблема заключалась в том, что стрелка всплывающей подсказки перекрывала фактическое изображение, которое пользователь должен навести на экран, чтобы вызвать отображение всплывающей подсказки - следовательно, мигает.

Моим решением было добавить класс css с дополнением, а затем добавить этот css к изображению. Это гарантирует, что изображение имеет прокладку вокруг него, и всплывающая подсказка больше не будет перекрывать изображение.

Вот мой CSS класс:

/* this is the padding applied to icon hyper-links to prevent the tooltip flicker issue */ 
.no_flicker_padding { 
    padding-top: 7px; 
} 

Вот мой HTML код (класс CSS был добавлен в гиперссылке, чтобы предотвратить эффект мерцания):

<a id="id_form_display_toggle" href="javascript:toggleDiv('id_toggle_professional_development_form_details');" rel="tooltip" title="{% trans 'Click to toggle the form details.' %}" trigger="hover" class="no_flicker_padding"> 

    <i id="id_professional_development_form_toggle" class="fa fa-angle-double-up icon_size26"></i> 

    <i id="id_professional_development_form_toggle" class="fa fa-angle-double-down icon_size26"></i> 

</a> 

Это предполагает, что размещение всплывающей подсказки будет «сверху».

Я надеюсь, что это может кому-то помочь.