Tooltip·component·@astryxdesign/core

Tooltip

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.

Open in Playground @astryxdesign/core/Tooltip

Showcases and examples

4 documented examples

Tooltip

Tooltip API entry

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · tooltip-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {Tooltip} from '@astryxdesign/core/Tooltip';
import {Button} from '@astryxdesign/core/Button';

export default function TooltipShowcase() {
  return (
    <Tooltip content="This is a helpful tooltip" placement="above">
      <Button label="Hover me" />
    </Tooltip>
  );
}

Usage

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.

Typed props

Prop	Type and behavior
`children`	`ReactNode` Trigger element(s) that activate the tooltip.
`anchorRef`	`RefObject<HTMLElement>` External anchor ref for sibling mode.
`content`	`ReactNode` Tooltip content, typically short text. Slot: Text
`placement`	`'above' \| 'below' \| 'start' \| 'end'` · default 'above' 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.

Tooltip text · required

Tooltip content rendered within the surface.

Theming

Targets

astryx-tooltip