useTooltipTriggerState

Manages state for a tooltip trigger. Tracks whether the tooltip is open, and provides methods to toggle this state. Ensures only one tooltip is open at a time and controls the delay for showing a tooltip.

install	`yarn add react-stately`
version	3.42.0
usage	`import {useTooltipTriggerState} from 'react-stately'`

View repository

GitHub

View package

NPM

API#

useTooltipTriggerState(
  (props: TooltipTriggerProps
)): TooltipTriggerState

Interface#

Properties

Name	Type	Description
`isOpen`	`boolean`	Whether the tooltip is currently showing.

Methods

Method	Description
`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.

Example#

See the docs for useTooltipTrigger in react-aria for an example of useTooltipTriggerState.

Name	Type	Default	Description
`isDisabled`	`boolean`	—	Whether the tooltip should be disabled, independent from the trigger.
`delay`	`number`	`1500`	The delay time for the tooltip to show up. See guidelines.
`closeDelay`	`number`	`500`	The delay time for the tooltip to close. See guidelines.
`trigger`	`'hover' \| 'focus'`	`'hover'`	By default, opens for both focus and hover. Can be made to open only for focus.
`closeOnPress`	`boolean`	`true`	Whether the tooltip should close when the trigger is pressed.
`isOpen`	`boolean`	—	Whether the overlay is open by default (controlled).
`defaultOpen`	`boolean`	—	Whether the overlay is open by default (uncontrolled).
`onOpenChange`	`( (isOpen: boolean )) => void`	—	Handler that is called when the overlay's open state changes.