Tooltip

A tooltip displays a description of an element on hover or focus.

import {TooltipTrigger} from 'react-aria-components';
import {Tooltip} from './Tooltip';
import {Button} from './Button';
import {Edit} from 'lucide-react';

function Example(props) {
  return (
    <TooltipTrigger>
      <Button aria-label="Edit">
        <Edit size={18} />
      </Button>
      <Tooltip {...props}>
        Edit
      </Tooltip>
    </TooltipTrigger>
  );
}

Interactions

Tooltips appear after a "warmup" delay when hovering, or instantly on focus. Once a tooltip is displayed, other tooltips display immediately. If the user waits for the "cooldown period" before hovering another element, the warmup timer restarts.

import {TooltipTrigger} from 'react-aria-components';
import {Tooltip} from './Tooltip';
import {Button} from './Button';
import {Edit} from 'lucide-react';
import {Save} from 'lucide-react';

function Example(props) {
  return (
    <div style={{display: 'flex', gap: 8}}>
      <TooltipTrigger {...props}>
        <Button aria-label="Edit">
          <Edit size={18} />
        </Button>
        <Tooltip>
          Edit
        </Tooltip>
      </TooltipTrigger>
      <TooltipTrigger {...props}>
        <Button aria-label="Save">
          <Save size={18} />
        </Button>
        <Tooltip>
          Save
        </Tooltip>
      </TooltipTrigger>
    </div>
  );
}

Custom trigger

DialogTrigger works with any focusable React Aria component (e.g. Button, Link, etc.). Use the <Focusable> component to wrap a custom trigger element such as a third party component or DOM element.

import {Focusable, TooltipTrigger} from 'react-aria-components';
import {Tooltip} from './Tooltip';

<TooltipTrigger>
  <Focusable>
    <span role="button">Custom trigger</span>
  </Focusable>
  <Tooltip>Tooltip</Tooltip>
</TooltipTrigger>

const CustomTrigger = React.forwardRef((props, ref) => (
  <button {...props} ref={ref} />
));

DialogTrigger or MenuTrigger with a <Pressable> trigger also works with TooltipTrigger. All <Pressable> elements are already focusable, so there's no need to wrap them in <Focusable>.

API

<TooltipTrigger>
  <Button />
  <Tooltip>
    <OverlayArrow />
  </Tooltip>
</TooltipTrigger>

TooltipTrigger

Tooltip

Default className: react-aria-Tooltip

OverlayArrow

Default className: react-aria-OverlayArrow