Skip to content


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.

View example on CodeSandbox

import {
} from '@floating-ui/react-dom-interactions';
function App() {
  return (
    <FloatingDelayGroup delay={{open: 1000, close: 200}}>
      <Tooltip label="One">
      <Tooltip label="Two">
      <Tooltip label="Three">


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} =
  const [open, setOpen] = useState(false);
  const onOpenChange = useCallback(
    (open) => {
      if (open) {
    [label, setCurrentId]
  const {context} = useFloating({open, onOpenChange});
  const {getReferenceProps, getFloatingProps} = useInteractions([
    useDelayGroup(context, {id: label}),
    useHover(context, {delay}),
  // ...