I had a project recently to build a custom tooltip for a client site. The spec called for something the opposite of out of the box so it would have to be done as a custom job; no single off the shelf plugin would work here. There was one in particular that I was really stoked I could use to make development a lot easier; hoverIntent.

When I started thinking about how to approach this project an immediate worry I had was how to bypass the snappiness of the default jquery hover behavior. As you’d probably expect it’s perfect, which sums up my problem; the project requirements called for an ajax tooltip which means every time it was activated a call to the server would happen. This would SUCK if it happened too much for basic performance reasons so it was important that there wasn’t any unnecessary server calls. Using the default behavior a user just dragging their mouse over the links would make a server call. This was no good.

Off the top of my head the best way to handle this situation was to write in some timers to delay the server call and add in some checks. Frankly though, I’m much too lazy for all that so I hit up my goto source for all code related head scratchers: StackOverflow.  There I heard about hoverIntent; a great plugin which handles all of the above and then some.

In a nutshell, hoverIntent works by replacing the normal calls to “hover” with “hoverIntent” with the same parameters as “hover”. A basic example of both techniques would be:

//default jquery hover usage
$("#demo1 li").hover( overCallBack, outCallBack );
 
//default jquery hover usage
$("#demo1 li").hoverIntent( overCallBack, outCallBack );

Note that there are 2 parameters that can be passed and they’re the same regardless of whether you’re using “hover” or “hoverIntent”; both are functions with the first being the over state (when the user mouses over the item) and the second being the out state (when the user moves their mouse off the item).

The above is the easiest and fastest way to use hoverIntent but there’s another, better, method that allows for much more customization. By passing hoverIntent and single object you can customize how the plugin behaves. hoverIntent allows for customization of the sensitivity and the interval, which according to the official site means:

timeout:
A simple delay, in milliseconds, before the “out” function is called. If the user mouses back over the element before the timeout has expired the “out” function will not be called (nor will the “over” function be called). This is primarily to protect against sloppy/human mousing trajectories that temporarily (and unintentionally) take

sensitivity:
If the mouse travels fewer than this number of pixels between polling intervals, then the “over” function will be called. With the minimum sensitivity threshold of 1, the mouse must not move between polling intervals. With higher sensitivity thresholds you are more likely to receive a false positive. Default sensitivity: 7

interval:
The number of milliseconds hoverIntent waits between reading/comparing mouse coordinates. When the user’s mouse first enters the element its coordinates are recorded. The soonest the “over” function can be called is after a single polling interval. Setting the polling interval higher will increase the delay before the first possible “over” call, but also increases the time to the next point of comparison. Default interval: 100

The below example illustrates how the object should be created and passed.

var settings = {
    sensitivity: 4,
    interval: 75,
    over: overCallBack,
    out: outCallBack
};
$("#demo1 li").hoverIntent( settings );

And there you go; a better way to handle hovering over elements with jquery.