useHoverIntent

A detection hook that distinguishes between accidental mouse-overs and intentional user hovers.

Tip

Use this to prevent "hover tunneling" or accidental triggers on tooltips and menus. The tolerance parameter allows the user to move the mouse slightly without immediately canceling the hover state.

Installation

bash

Description

The useHoverIntent helps prevent "flickering" UI elements (like tooltips or dropdowns) by measuring how long the mouse stays over an element and checking the pointer's movement tolerance. If the mouse moves too quickly across the element or leaves before the delay expires, the interaction is considered accidental and isIntent remains false.

Parameters

NameTypeDescription
options.delaynumberTime in milliseconds the pointer must dwell over the element. Default: 100.
options.tolerancenumberPixel movement allowed before the intent timer resets. Default: 6.

Return values

NameTypeDescription
handlersObjectMouse event handlers (onMouseEnter, onMouseLeave, onMouseMove) to be spread on the target element.
isIntentbooleanReactive state that becomes true only when a hover is deemed intentional.

Demo

Hover Intent

Source code

tsx