Question

我有一个屏幕，其中有很多链接，并且悬停在它们上面，我需要显示一个工具提示div，其中包含一些信息。我的工具提示工作正常。但是通过测试有一个抱怨，工具提示甚至在链接上悬停时出现（当意图不是看工具提示时），这很烦人。我的新要求是：只有当用户悬停5秒钟时（例如），才能使工具提示可见。任何人都可以告诉我该怎么做？我读到了关于settimeout（）但我认为这只会延迟函数调用。我需要的是在用户不要悬停5秒的情况下中止函数调用。以下是我的代码：

$(document)
                .ready(
                        function() {

                            var changeTooltipPosition = function(event) {
                                var tooltipX = event.pageX - 8;
                                var tooltipY = event.pageY + 8;
                                $('div.tooltip').css({
                                    top : tooltipY,
                                    left : tooltipX
                                });
                            };

                            var showTooltip = function(event) {
                                //alert($(this).val());
                                //var hiddenProductData = $(this).closest('tr').find('input:hidden').val(), 

                                var hiddenProductData = "",
                                    tableString = "<div class='tooltip' ><table><thead></thead><tbody>";
                                var hiddenModuleType = $('#hiddenModuleType').val(),
                                    hiddenid         = $(this).closest('tr').find('.id').val(); 
                                var hiddenProductDataTokens, nameValueTokens;
                                //$.getJSON('/getToolTipInfo/'+hiddenModuleType+'/'+hiddenid, function(jsonData) {

                                if (hiddenProductData
                                                    && hiddenProductData != '') {

                                }

                                $.getJSON('getToolTipInfo/'+hiddenModuleType+'/'+hiddenid, function(jsonData) {

                                            hiddenProductData = jsonData.data;
                                            if (hiddenProductData
                                                    && hiddenProductData != '') {
                                                hiddenProductDataTokens = hiddenProductData
                                                        .split("#");
                                                if (hiddenProductDataTokens.length > 0) {
                                                    $
                                                            .each(
                                                                    hiddenProductDataTokens,
                                                                    function(index,
                                                                            value) {
                                                                        nameValueTokens = value
                                                                                .split(",");
                                                                        tableString += "<tr><td>"
                                                                                + nameValueTokens[0]
                                                                                + " : "
                                                                                + nameValueTokens[1]
                                                                                + "</td></tr>";
                                                                    });
                                                }
                                                tableString += "</tbody></table></div>";
                                            }
                                            $(tableString).appendTo('body');
                                            changeTooltipPosition(event);
                                });


                                /* $(tableString).appendTo('body');
                                changeTooltipPosition(event); */

                            };

                            var hideTooltip = function() {
                                $('div.tooltip').remove();
                            };

//I want to be able to abort the showtooltip on mouseenter in case hover is for less     than 5 seconds
                             $(".tooltipelement").bind({
                                mousemove : changeTooltipPosition,
                                mouseenter : showTooltip,
                                mouseleave : hideTooltip
                            }); 
                        });

由于 Suvo

Answer 1

你真的可以将setTimeout与clearTimeout结合使用。

在moseouver事件上，调用setTimeout并将其引用保存在某些变量中：

var show_tooltip_timeout = setTimeout(<your function>, delay);

在mouseleave上，调用clearTimeout中止执行：

clearTimeout(show_tooltip_timeout).

Answer 2

你可以这样做：

var hoverDelayTimeout = null; // remember the timer id in this variable

$(".tooltipelement").bind({
    mousemove : changeTooltipPosition,
    mouseenter : function(event) {
        // start a timer that calls showTooltip after 5 secs and store it's ID
        hoverDelayTimeout = setTimeout(function() {
            showTooltip(event);
        }, 5000);
    },
    mouseleave : function(event) {
        // clear the current timer (will prevent the tooltip if less than 5 secs have passed)
        clearTimeout(hoverDelayTimeout);
        hideTooltip();
    }
});

注意嵌套在mouseenter上的函数，这是将事件传递给showTooltip所必需的。如果你在某些时候也需要hideTooltip中的事件，你必须以同样的方式包装它。

有条件地根据超时调用jquery事件

2 个答案: