CODEWITHSUNDEEP
jquerymouseovermouseouthoverintent
Bart
Bart

Reputation: 99

jQuery - ToolTip - mouseover & mouseout seem to be firing in loop without mouse movement - hoverintent hasn't helped

What I'm trying to do: I have a div that I generate and hide on page load. When specific elements on the page are moused over, I want to display the div as a tool tip above the element. I had added a 'ToolTipRequired' class to all the elements on the page that require this functionality and am binding hoverintent on page load.

My Code:

jQuery(document).ready(function () {
    jQuery('.ToolTipRequired').each(function () {
        jQuery(this).hoverIntent({ over: function (event) {
                var toolTip = jQuery('#ToolTipDiv');

                // xCoord = (destination - ((toolTip width - 14px padding either side of image) / 2)) + (destination width / 2);
                var xCoord = event.pageX - ((toolTip.width() - 28) / 2) - 15;
                // yCoord = destination - (toolTip height - 14px padding top and 10px padding bottom)
                var yCoord = event.pageY - (toolTip.height() - 25) - 15;

                // need to show the tool tip first so that we can set it's offset
                toolTip.show('fast');
                toolTip.offset({ left: xCoord, top: yCoord });
        },
        timeout: 500,
        out: function () {
            jQuery('#ToolTipPanel').hide();
        } 
    });
});

Problem: 10% of the time this works beautifully, the other 90% the tool tip div flashes, that is, it hides and shows infinitely even if the mouse remains still. It seems like the mouseover and mouseout events are endlessly firing. I was told the use of hoverintent would rectify this problem but it doesn't seem to have made a difference. Does anyone have any idea?

Upvotes: 2

Views: 2152

Answers (2)

GregM
GregM

Reputation: 2654

Got this problem once, you can use this :

jQuery('.ToolTipRequired').hover(function(){/*OnmouseIn*/}, function(){/*onMouseOut*/});

Upvotes: 0

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21366

Try using mouseenter and mouseleave instead , 

$('.ToolTipRequired').mouseenter( function (event) {
//.........
 }).mouseleave( function (event) {
//........
 });

Upvotes: 1

Related Questions