我正在尝试做的是:
我有一个div,它在页面加载时生成并隐藏。将鼠标悬停在页面上的特定元素上时,我想将div作为工具提示显示在元素上方。我已经向需要此功能的页面上的所有元素添加了“ ToolTipRequired”类,并且在页面加载时绑定了hoverintent。

我的代码:

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可以纠正此问题,但似乎没有什么不同。
有谁有想法吗?

最佳答案

尝试改用mouseentermouseleave

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

10-08 02:11