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/tooltip`
version	3.0.1
usage	`import {useTooltipTriggerState} from '@react-stately/tooltip'`

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(): 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`	—	The delay time for the tooltip to show up. See guidelines.
`offset`	`number`	`7`	The additional offset applied along the main axis between the element and its anchor element.
`crossOffset`	`number`	`0`	The additional offset applied along the cross axis between the element and its anchor element.
`trigger`	`'focus'`	—	By default, opens for both focus and hover. Can be made to open only for focus.
`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.