The Hover component wraps any element and displays an overlay on top when the user hovers over it or focuses on it. It's perfect for creating interactive cards with hover effects, image overlays, or any content that needs to reveal additional information on interaction.
Add a delay before the overlay appears or disappears with the delay and hideDelay props.
The component supports keyboard navigation. For non-focusable triggers, add tabIndex={0} to make the wrapper keyboard-accessible. If your trigger is already focusable (like a Card with href), use tabIndex={-1} to prevent duplicate focus stops.
By default, the hover effect is disabled on touch devices. You can set touch="enable" to allow hover interactions, or touch="display" to always show the overlay on touch devices.
By default, the overlay is not interactive and click events are passed through to the trigger. You can set interactive to make the overlay interactive.
