전체 카탈로그
OverlayTooltip12 props

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 supplem...

공식 문서 열기
live previewOverlay

Preview

Import

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

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

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 supplem...

tooltiphintinfotiptitlehoverflyoutballoonhelpertext

Important props

placementabove | below | start | endoptional
alignmentstart | center | endoptional
focusTriggerauto | always | neveroptional
hasHoverIndicationauto | booleanoptional

Theming targets

astryx-tooltip

Best practices

  • DoKeep tooltip content concise: aim for under 140 characters of plain text.
  • DoAdd a tooltip to icon-only buttons and controls that lack a visible label.
  • Do notPlace interactive elements like links or buttons inside a tooltip; use HoverCard or Popover instead.
  • Do notUse tooltips for essential information that users must see to complete a task.