FloatingDelayGroup
Provides context for a group of floating elements that should
share a delay
which temporarily becomes 0
after the first floating element of the group opens.
This allows higher discovery of floating elements when they have a hover delay (like tooltips) when their reference elements are placed near each other.
import {
FloatingDelayGroup
} from '@floating-ui/react-dom-interactions';
function App() {
return (
<FloatingDelayGroup delay={{open: 1000, close: 200}}>
<Tooltip label="One">
<button>Ref</button>
</Tooltip>
<Tooltip label="Two">
<button>Ref</button>
</Tooltip>
<Tooltip label="Three">
<button>Ref</button>
</Tooltip>
</FloatingDelayGroup>
);
}
Example
Relevant APIs to use with a <FloatingDelayGroup />
:
useDelayGroupContext()
useDelayGroup()
interaction
Wrap your onOpenChange
callback with one that sets the
current id of the delay group context to the current component.
function Tooltip({label}) {
const {delay, currentId, setCurrentId} =
useDelayGroupContext();
const [open, setOpen] = useState(false);
const onOpenChange = useCallback(
(open) => {
setOpen(open);
if (open) {
setCurrentId(label);
}
},
[label, setCurrentId]
);
const {context} = useFloating({open, onOpenChange});
const {getReferenceProps, getFloatingProps} = useInteractions([
useDelayGroup(context, {id: label}),
useHover(context, {delay}),
]);
// ...
}