Floating Delay Group
Provides context for a group of floating elements that should
share a delay
which temporarily becomes 1
ms
after the first floating element of the group opens.
This is useful to enable higher discovery of floating elements when they have a hover delay (like tooltips) when their reference elements are placed near each other.
Example
Usage
To enable delay grouping:
- Wrap the grouped floating components in a
<FloatingDelayGroup />
provider. - Call
useDelayGroupContext()
to read the data from<FloatingDelayGroup />
, which provides the delay for the group to pass to theuseHover()
Hook. useDelayGroup()
, a Hook called inside the component, enables grouping for the component.
Props
delay
Required
default: 0
The delay to use for the group.
timeoutMs
default: 0
An optional explicit timeout to use for the group, which represents when grouping logic will no longer be active after the close delay completes. This is useful if you want grouping to “last” longer than the close delay, for example if there is no close delay at all.
Transitions
- isInstantPhase is a boolean
that determines whether the delay is currently in the instant phase.
This allows you to make transitions instant/faster. See
useTransitionStyles
. - currentId refers to the
id
of the floating element of the group currently open.