Conditionally call jquery events based on timeout

Question

I have a screen where there are many links and on hover on them, I need to show a tooltip div with some information. My tooltip is working good. But there is a complain by testing that, tooltip appears even on hover over links (when intention is not to see the tooltip) and thats annoying. My new requirement is : tooltip should be made visible only if user hover for 5 second(for example). Can anyone enlighten me how to do that? I read about settimeout() but I think that will only delay the function call. What I need is to abort function call in case user dont hover for 5 seconds. Given below is my code :

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

Thanks Suvo

Answer 1

You can do it like this:

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

Note the function nesting on mouseenter which is necessary to pass the event on to showTooltip. In case you need the event in hideTooltip at some point as well, you have to wrap it the same way.

Answer 2

You really can use setTimeout combined with clearTimeout.

on moseouver event, call setTimeout and keep its reference in some variavel like this:

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

on mouseleave, call clearTimeout to abort execution:

clearTimeout(show_tooltip_timeout).