jQuery - ToolTip - mouseover & mouseout scheinen in der Schleife ohne Mausbewegung ausgelöst zu werden - hoverintent hat nicht geholfen

Question

Was ich zu tun versuche: Ich habe ein Div, das ich generieren und beim Laden der Seite ausblenden. Wenn bestimmte Elemente auf der Seite mit der Maus überfahren werden, möchte ich das Div als Tooltip über dem Element anzeigen. Ich hatte eine "ToolTipRequired"-Klasse für alle Elemente auf der Seite hinzugefügt, die diese Funktionalität erfordern und bin Bindung hoverintent auf Seite laden.

Mein 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: In 10 % der Fälle funktioniert das wunderbar, in den anderen 90 % blinkt das Tooltip-Div, d. h. es wird unendlich oft ein- und ausgeblendet, auch wenn die Maus stillsteht. Es scheint, als ob die Mouseover- und Mouseout-Ereignisse endlos abgefeuert werden. Mir wurde gesagt, die Verwendung von hoverintent würde dieses Problem zu beheben, aber es scheint nicht einen Unterschied gemacht haben. Hat jemand eine Idee?

Answer 1

Versuchen Sie es mit mouseenter y mouseleave stattdessen,

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

Answer 2

Wenn Sie dieses Problem einmal haben, können Sie dies verwenden:

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