Tooltip

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

placement

crossOffset

shouldFlip

shouldCloseOnPress

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 {style} from '@react-spectrum/s2/style' with {type: 'macro'}; import Edit from '@react-spectrum/s2/icons/Edit'; import Save from '@react-spectrum/s2/icons/SaveFloppy'; function Example(props) { return ( <div className={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> ); }

Accessibility

Tooltips are not shown on touch screen interactions. Ensure that your UI is usable without tooltips, or use an alternative component such as a Popover to show information in an adjacent element.

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 {Button, ContextualHelp, Heading, Content} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; <div className={style({display: 'flex', gap: 8, 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.
`shouldCloseOnPress`	`boolean`	Default: `true`
Whether the tooltip should close when the trigger is pressed.

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

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