useTootip

useTooltip is a hook for building a tooltip.

The tooltip pattern in ARIA practices is still under development, and there is an ongoing discussion about the role's purpose.

This follows that pattern and the pattern used on Slack.

• The tooltip should have the role tooltip
• The tooltip should be connected to the target element using aria-describedby
• The tooltip should be displayed on focusin or mouseover
• The tooltip should be removed on focusout or mouseleave

Usage

const { props, tooltip } = useTooltip('Tooltip message');

return (
  <>
    <button type="button" {...props}>
      Action
    </button>
    {tooltip}
  </>
);

Arguments

{ props, tooltip } = useTooltip(message, { id, positionOptions, className = 'react-dialogs-tooltip', ...props })

• message - Node - the message to display in the tooltip
• id - String - id of the tooltip - defaults to a random string
• positionOptions - Object - options to pass to usePosition
• className - String - class name of the tooltip. Defaults to "react-dialogs-tooltip"
• props - Additional props to apply to the tooltip

Returns:

• props - Object - An object with props to apply to the target element
• tooltip - Node - The tooltip react element