jQuery - ToolTip - кажется, что при наведении курсора и наведении мыши происходит цикл без движения мыши - зависание не помогло

Question

Что я пытаюсь сделать: У меня есть div, который я генерирую и скрываю при загрузке страницы. Когда определенные элементы на странице наведены, я хочу отобразить div в качестве всплывающей подсказки над элементом. Я добавил класс ToolTipRequired ко всем элементам на странице, которым требуются эти функции, и я обязуюсь зависать при загрузке страницы.

Мой код:

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

Проблема: В 10% случаев это работает прекрасно, остальные 90% div всплывающей подсказки вспыхивают, то есть скрываются и отображаются бесконечно, даже если мышь остается неподвижной. Кажется, что события mouseover и mouseout бесконечно запускаются. Мне сказали, что использование hoverintent решит эту проблему, но, похоже, это не имеет значения. У кого-нибудь есть идеи?

Answer 1

Попробуйте использовать mouseenter и mouseleave вместо

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

Answer 2

Получил эту проблему один раз, вы можете использовать это:

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