A short text hint that appears on hover or focus, anchored to a trigger element. Use it to describe icon-only buttons, show the full text of truncated labels, or provide supplementary context without cluttering the UI.
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
A short text hint that appears on hover or focus, anchored to a trigger element. Use it to describe icon-only buttons, show the full text of truncated labels, or provide supplementary context without cluttering the UI.
Keep tooltip content concise: aim for under 140 characters of plain text.
Add a tooltip to icon-only buttons and controls that lack a visible label.
Set touchTrigger to tap when the trigger is a button whose only job is revealing the tooltip, such as an info icon: touch has no hover, and auto keeps the tap for triggers that perform an action.
Place interactive elements like links or buttons inside a tooltip; use HoverCard or Popover instead.
Use tooltips for essential information that users must see to complete a task.
Position relative to the anchor element. Logical: start/end resolve against the popover's own inherited direction (RTL mirrors in pure CSS).
alignment
'start' | 'center' | 'end' · default 'center'
Alignment along the placement axis. Logical: start/end resolve against the popover's own inherited direction (RTL mirrors in pure CSS).
delay
number · default 200
Show delay in milliseconds.
hideDelay
number · default 0
Hide delay in milliseconds.
focusTrigger
'auto' | 'always' | 'never' · default 'auto'
Controls when focus events trigger the tooltip.
touchTrigger
'auto' | 'tap' | 'none' · default 'auto'
What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own (a button, link, or form control), whose tap belongs to the control. tap always opens; use it for an info icon rendered as a button, whose only job is to reveal the tooltip. none never opens on touch.
isEnabled
boolean · default true
Enables or disables the tooltip triggers.
onOpenChange
(isOpen: boolean) => void
Callback fired when tooltip visibility changes. Called with true when shown and false when hidden.
hasHoverIndication
'auto' | boolean · default 'auto'
Shows a dashed underline on the trigger element.
isDefaultOpen
boolean
Whether the tooltip should be shown on mount. Still dismissible.
isOpen
boolean
Controlled open state for the tooltip.
Anatomy
Tooltip surface · required
Painted overlay surface that presents the tooltip.
