useTooltip

import { useTooltip } from 'react-laag';

This is an utility hook that combines functionalities of useToggleLayer() and useHover().

Type

(
renderLayer: (props: RenderLayerProps): ReactNode,
options: Options
): [ReactNode, TriggerProps]

RenderLayerProps

See <ToggleLayer/>'s renderLayer prop for more info.

Options

Same props as <ToggleLayer/> and same options as useHover(), except for isOpen, onOutsideClick() and onDisappear().

TriggerProps

This prop-object should be spread over the element that will trigger the tooltip, ie.:
<div {...triggerProps} />

It contains a few event-handlers and a ref.

Example

function Example() {
  const [element, triggerProps] = useTooltip(
    ({ isOpen, layerProps }) =>
      isOpen && <div {...layerProps}>I'm a tooltip!</div>,
    {
      delayEnter: 100,
      delayLeave: 100
    }
  );

  return (
    <>
      {element}
      <div {...triggerProps}>Hover me...</div>
    </>
  )
}