I want to make sure the user wants to have something pop up by mouseing over a div. I don't want the user to accidentally trigger something to pop up without intent. setTimeout doesn't work because even if it's very brief, the pop up will still pop up, it's just delayed. What I want is the user to mouseover something for 1sec for a pop up to display.

**update:

When I do this:

<div onmouseover="myTimer=setTimeout('display(this)', 5000);">

the timer works and it is displayed after 5 seconds but this is not passed and I can't get the element via $(element).next(), etc. When I do this:

 <div onmouseover="myTimer=setTimeout(display(this), 5000);">

the timer doesn't work. What is wrong, how can I get the timer and the this to be passed?

Thanks!

**update2: the this problem from here states: "Code executed by setTimeout() is run in a separate execution context to the function from which it was called. As a consequence, the this keyword for the called function will be set to the window (or global) object, it will not be the same as the this value for the function that called setTimeout."

I found the answer to overe this here where you have to "save a reference to the context where the setTimeout function call is made"

I want to make sure the user wants to have something pop up by mouseing over a div. I don't want the user to accidentally trigger something to pop up without intent. setTimeout doesn't work because even if it's very brief, the pop up will still pop up, it's just delayed. What I want is the user to mouseover something for 1sec for a pop up to display.

**update:

When I do this:

<div onmouseover="myTimer=setTimeout('display(this)', 5000);">

the timer works and it is displayed after 5 seconds but this is not passed and I can't get the element via $(element).next(), etc. When I do this:

 <div onmouseover="myTimer=setTimeout(display(this), 5000);">

the timer doesn't work. What is wrong, how can I get the timer and the this to be passed?

Thanks!

**update2: the this problem from here states: "Code executed by setTimeout() is run in a separate execution context to the function from which it was called. As a consequence, the this keyword for the called function will be set to the window (or global) object, it will not be the same as the this value for the function that called setTimeout."

I found the answer to overe this here where you have to "save a reference to the context where the setTimeout function call is made"

• javascript
• onmouseover

• 4 You should use setTimeout, but you should then clear it via clearTimeout if you no longer wish to handle the event. – Matt Commented Jan 10, 2012 at 15:16
• Great idea! I hate it when I roll the mouse around a page and all kinds of unwanted tooltips pop up and obscure the content, and I don't want this to happen to my users. – DOK Commented Jan 10, 2012 at 15:31
• Try to add quotas into display parameters – DonCallisto Commented Jan 10, 2012 at 16:31
• @DonCallisto like this: <div onmouseover="myTimer=setTimeout(display('this'), 5000);"> ? It still doesn't work, it gets into the function but this isn't passed the way I want it to. – JCarter Commented Jan 10, 2012 at 16:37
• @JCarter I updated my answer to call display properly with this. – Paul Commented Jan 11, 2012 at 4:15

4 Answers 4

This should work for you:

<div id="example">Hover me</div>
<script type="text/javascript">
    (function(){
        var timer;
        var el = document.getElementById('example');

        el.onmouseover = function(){
            timer = setTimeout(function(){
                display(el);
                // If display takes no arguments and uses the "this" keyword inside it
                // Use display.call(el); instead
            }, 1000);
        }

        el.onmouseout = function(){
            clearTimeout(timer);
        }
    })();
</script>

Example on JSFiddle

I'm pretty sure that this should works:

onmouseover="myTimer=setTimeout(yourFunctionName, 1000);"

You have also to add:

onmouseout="clearTimeout(myTimer);"

On mouse over you can start a timer. On mouse out reset the timer to 0. If the timer reaches 1s, you can trigger your event and reset the timer to 0.

I also later came across something called the hoverIntent jQuery Plug-in, worth checking out.