Tooltip

Display container for Tooltip content. Has a directional arrow dependent on its placement.

placement

offset

crossOffset

shouldFlip

import {Tooltip, TooltipTrigger, ActionButton} from '@react-spectrum/s2';
import Edit from '@react-spectrum/s2/icons/Edit';

<TooltipTrigger>
  <ActionButton aria-label="Edit name"><Edit /></ActionButton>
  <Tooltip>Edit name</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.

trigger

delay

isDisabled

import {TooltipTrigger, Tooltip, ActionButton} from '@react-spectrum/s2';
import Edit from '@react-spectrum/s2/icons/Edit';
import Save from '@react-spectrum/s2/icons/SaveFloppy';

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

Non-interactive elements

Tooltips must be placed on focusable elements so they are accessible to keyboard and screen reader users. Use ContextualHelp to provide context for non-interactive elements such as plain text or disabled buttons.

import {Tooltip, TooltipTrigger, Button, ContextualHelp, Heading, Content} from '@react-spectrum/s2';

<div style={{display: 'flex', gap: '6px', alignItems: 'center'}}>
  <Button isDisabled>Delete resource</Button>
  <ContextualHelp variant="info">
    <Heading>Permission required</Heading>
    <Content>
      Your admin must grant you permission before you can delete resources.
    </Content>
  </ContextualHelp>
</div>

API

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

TooltipTrigger

TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip relative to the trigger.

Name	Type	Default
`children`	`ReactNode`	Default: —
The content of the tooltip.
`placement`	`'start' \| 'end' \| 'right' \| 'left' \| 'top' \| 'bottom'`	Default: `'top'`
The placement of the element with respect to its anchor element.
`isDisabled`	`boolean`	Default: —
Whether the tooltip should be disabled, independent from the trigger.
`delay`	`number`	Default: `1500`
The delay time for the tooltip to show up. See guidelines.
`trigger`	`'hover' \| 'focus'`	Default: `'hover'`
By default, opens for both focus and hover. Can be made to open only for focus.

Display container for Tooltip content. Has a directional arrow dependent on its placement.

Name	Type
`children`	`ReactNode`
The content of the tooltip.