How to have a mouseover event fire only if the mouse is hovered over an element for at least 1 second?

Question

I want to display a dialog when a user mouses over a certain image. That part works. Unfortunately if the mouse even just passes over the corner of the image quickly it will display the dialog. I would like to have the dialog show only if the mouse is left over the image for one full second so as to avoid inadvertent pop ups.

I saw this question but it is for jQuery and I am using Prototype. I don't know enough jQuery to interpret that solution.

If someone could explain the logic or JavaScript functionality that will be required to cause a delayed firing of the mouseover event I would appreciate it.

Oribelle

well if you feel like learning some simple jquery, the answer i posted would be very easy to implement – Algonquian

Answer 1

You can't delay the firing of the event, but you can delay your handling of the event.

Here's a quick example without jQuery or Prototype that will make it easier to understand.

var delay = function (elem, callback) {
    var timeout = null;
    elem.onmouseover = function() {
        // Set timeout to be a timer which will invoke callback after 1s
        timeout = setTimeout(callback, 1000);
    };

    elem.onmouseout = function() {
        // Clear any timers set to timeout
        clearTimeout(timeout);
    }
};


delay(document.getElementById('someelem'), function() {
    alert("Fired");
});

Parsons

I was thinking I would have to check the mouse coordinates after the delay. I didn't even think I could just clear the timeout on mouse out. Brilliant – Jiggerypokery

This solution is simple and effective! I am using this approach with event delegation and it works well, even with my very complicated event handling situation! – Giguere

Answer 2

I inspired by Robert (thanks) and for to loading data detail from table I use this:

<tr onmouseover="funcDelay= setTimeout('loadData(5)', 1000)" onmouseout="clearTimeout(funcDelay)">

And function for load data

function fLoadDatDetail(vZadId) {
  $("#divId").load("/controller/function/"+vZadId);
}

You must keep mouse 1 second over one row of the <TABLE>, to get details of it.

Insoluble

Answer 3

check out the hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html it will do exactly what you want.

I usually dont post links to answers but it is easy to use and would be good to read over it and learn it.

Algonquian

The from my understanding OP is not using jQuery. Is there a similar system in Prototype or that does not rely on jQuery? – Dykstra

i have a tendency to read a question and be like "oh goodie a question i can answer!!" and answer it without reading the whole thing carefully. – Algonquian

Answer 4

The logic is as follows:

When the mouse moves over the object a timer is created that will trigger in 1000 milliseconds. When the mouse moves off the object, if the timer has not yet triggered, the timer is disabled and removed from memory preventing it from triggering.

Dykstra

It should be noted: you can't delay the firing of the mouseover event. What this solution does is detect if a mouseover is followed by a mouseout within 1000 milliseconds and prevent the dialog from displaying. – Myrt

Answer 5

This works for our team (Similar to roberts answer):

window.myShowToolTipFunction = function(element) {
        
        var timeout = setTimeout(function () {
            showTooltip(element);
        }, 300);
        
        $(element).on('mouseleave.recordHover', function () {
            clearTimeout(timeout);
        });
    }

and

function showTooltip(element){
      // do your stuff here 
    }

Enolaenormity