Hover Intent Detection Plugin With jQuery - hoverIntent

A lightweight yet useful jQuery user intent detection plugin to extend the jQuery's hover method that delays the handlerIn function until the user actually wants to hover over a specific element. Great for preventing the accidental firing of hover events when the mouse pointer enters and leaves the elements.

How to use it:

1. Load the JavaScript file 'jquery.hoverIntent.js' plugin after jQuery JavaScript library and the hoverIntent is ready for use.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.hoverIntent.js"></script>

2. Basic usage. Just like the .hover() method.

• handlerIn: function OR configuration object
• handlerOut: function OR selector for delegation OR undefined

.hoverIntent( handlerIn, handlerOut )
.hoverIntent( handlerInOut )

3. Basic usage. With event delegation.

• handlerIn: function OR configuration object
• handlerOut: function OR selector for delegation OR undefined
• selector: selector OR undefined

.hoverIntent( handlerIn, handlerOut, selector )
.hoverIntent( handlerInOut, selector )

4. Activate the plugin using a basic configuration object.

.hoverIntent({

  // 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. 
  interval: 100,

  // 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. Note that hoverIntent r7 and earlier perform this comparison using rectilinear distance, whereas more recent versions compare against Euclidean (straight-line) distance for better accuracy and intuition. 
  // If you are upgrading from an older version, you may want to verify that the desired behavior is preserved. 
  sensitivity: 6,

  // 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 the user off of the target element... giving them time to return. 
  timeout: 0
  
})

Changelog:

2021-12-14

• v1.10.2: Replaces the deprecated jQuery.isFunction

2019-10-06

• v1.10.1: Fixes a possible race condition by checking for hoverIntent data before attempting to access it

2019-02-26

• v1.10.0

2017-09-01

• v1.9.0

---

This awesome jQuery plugin is developed by briancherne. For more Advanced Usages, please check the demo page or visit the official website.