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.

View example on CodeSandbox

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}),
  ]);
 
  // ...
}