useTooltipTrigger

Provides the behavior and accessibility implementation for a tooltip trigger, e.g. a button that shows a description when focused or hovered.

Example

Tooltip.tsx

Tooltip.css

Button.css

Example

Tooltip.tsx

Tooltip.css

Button.css

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

<div style={{display: 'flex', gap: 8}}>
  <TooltipTrigger tooltip="Edit">
    <Button className="react-aria-Button button-base" data-variant="secondary">Edit</Button>
  </TooltipTrigger>
  <TooltipTrigger tooltip="Delete">
    <Button className="react-aria-Button button-base" data-variant="secondary">Delete</Button>
  </TooltipTrigger>
</div>

API

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

useTooltipTriggerState(props: TooltipTriggerProps): TooltipTriggerState

useTooltipTrigger(
  props: TooltipTriggerProps,
state: TooltipTriggerState,
ref: RefObject<FocusableElement | null>
): TooltipTriggerAria

useTooltip(props: AriaTooltipProps, state?: TooltipTriggerState): TooltipAria

TooltipTriggerState

Properties

Name	Type
`shouldSkipAnimation`	`boolean`
Whether the tooltip is being shown or hidden without an animation. This is true while the global warmup timer is active, i.e. when quickly moving between tooltips.

Methods

`open(immediate?: boolean): void`
Shows the tooltip. By default, the tooltip becomes visible after a delay depending on a global warmup timer. The `immediate` option shows the tooltip immediately instead.
`close(immediate?: boolean): void`
Hides the tooltip.

TooltipTriggerProps

Name	Type	Default
`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.
`closeDelay`	`number`	Default: `500`
The delay time for the tooltip to close. 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.

TooltipTriggerAria

Name	Type
`tooltipProps`	`DOMAttributes`
Props for the overlay container element.
`triggerProps`	`DOMAttributes`
Props for the trigger element.

AriaTooltipProps

Name	Type

TooltipAria

Name	Type
`tooltipProps`	`DOMAttributes`
Props for the tooltip element.