useHover

Opens the floating element while hovering over the reference element, like CSS :hover.

import { useHover } from '@skeletonlabs/floating-ui-svelte';

Usage

import { useFloating, useInteractions, useHover } from '@skeletonlabs/floating-ui-svelte';

const floating = useFloating();
const hover = useHover(floating.context);
const interactions = useInteractions([hover]);

svelte

<!-- Reference Element -->
<button
	bind:this="{floating.elements.reference}"
	{...interactions.getReferenceProps()}
>
	Reference
</button>

<!-- Floating Element -->
<div
	bind:this="{floating.elements.floating}"
	style="{floating.floatingStyles}"
	{...interactions.getFloatingProps()}
>
	Tooltip
</div>

Options

`enabled`	Enables the hook. boolean true
`mouseOnly`	Only allow pointers of type mouse to trigger the hover (thus excluding pens and touchscreens). boolean false
`delay`	Time in ms that will delay the change of the open state. Also accepts an object with open and close properties for finer grained control. number 0
`restMs`	Time in ms that the pointer must rest on the reference element before the open state is set to true. number 0
`move`	Whether moving the pointer over the floating element will open it, without a regular hover event required. boolean true
`handleClose`	Callback to handle the closing of the floating element. HandleCloseFn null

Compare

Compare to Floating UI React.