0

I used the mouseover event to show tooltips for my buttons due to I have a Single-page Web Application, where the total number of buttons changes dynamically.

A button is defined like this

<button type="button" class="btn btn-primary btn-xs mapButton" data-toggle="tooltip" title="message">
    <span class="glyphicon glyphicon-map-marker"></span> 
       Map
</button>

And I show and hide the tooltips with the js below.

$(document).on('mouseover', '[data-toggle="tooltip"]', function () {
    console.log("show tooltip");
    $(this).tooltip('show');
});

$(document).on('click', '[data-toggle="tooltip"]', function () {
    console.log("hide tooltip");
    $(this).tooltip('hide');
});

$(document).on('mouseout', '[data-toggle="tooltip"]', function () {
    console.log("hide tooltip");
    $(this).tooltip('hide');
});

Whenever I move with the mouse over a button you will find show tooltip and hide tooltip several times in the console/output during the mouse moves over the button. This leads sometimes to flickering tooltips. Why is this the case and how can I avoid this?

d4rty
  • 3,970
  • 5
  • 34
  • 73
  • Maybe try and use `.mouseenter()` as an alternative - see http://api.jquery.com/mouseover/ and http://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and-mouseenter-events – Gavin Thomas Apr 08 '16 at 13:51
  • Exactly what I was looking for. Thanks! – d4rty Apr 08 '16 at 13:53

0 Answers0