Headless hook for hover/focus-triggered tooltips. Builds on useLayer with hover intent, keyboard focus handling, and accessible aria-describedby linking. Use for custom trigger elements that need tooltip behavior without the wrapper component.
What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own; tap always opens (an info icon rendered as a button); none never opens on touch.
Render function for the anchor-positioned tooltip content. The positioning opt-out is excluded: the tooltip always derives its position from placement/alignment.
Showcases and examples
1 documented example
Tooltip — Hook Usage
Tooltip using the useTooltip hook for programmatic control.
Preview loads on approachPreview loads on approach
Exact source · tooltip-hook-usage
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {useTooltip} from '@astryxdesign/core/Tooltip';
import {Button} from '@astryxdesign/core/Button';
import {Center} from '@astryxdesign/core/Center';
export default function TooltipHookUsage() {
const tooltip = useTooltip({
placement: 'above',
delay: 100,
});
return (
<Center>
<Button
label="Using hook directly"
ref={tooltip.ref}
aria-describedby={tooltip.describedBy}
/>
{tooltip.renderTooltip('Tooltip via hook')}
</Center>
);
}
Usage
Headless hook for hover/focus-triggered tooltips. Builds on useLayer with hover intent, keyboard focus handling, and accessible aria-describedby linking. Use for custom trigger elements that need tooltip behavior without the wrapper component.
Use for brief text labels that describe icon buttons, truncated text, abbreviations, or compact controls.
Prefer the Tooltip component for standard wrapping; use the hook when the trigger is not a simple child.
Put interactive content inside tooltips: use Popover or HoverCard instead.
