Bootstrap tooltip flashing on hover

Question

I've added a bootstrap tooltip, however, sometimes ( and only sometimes ) when I hover over the image to show the tooltip, the image just flashes without actually showing the tooltip, like so:

Here's my 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>

What's wrong?

Answer 1

I actually had this issue.

For me, the issue was that the tooltip arrow was overlapping the actual image that the user must mouse over to trigger the display of the tooltip - hence the flashing.

My solution was to add a css class with a padding and then adding that css to the image. This will ensure that the image has a padding around it and the tooltip will no longer overlap the image.

Here is my css class:

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

Here is my html code (the css class has been added to the hyperlink to prevent the flicker effect):

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

This assumes that the tooltip placement will be "top".

I hope that this can help someone.

Answer 2

I would try wrapping the JS code in document.ready like so:

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