Tooltip

Tooltip

<TooltipTrigger>
  <IconButton aria-label="Save"><SaveIcon /></IconButton>
  <Tooltip>Save (⌘S)</Tooltip>
</TooltipTrigger>

Install: @helixui/core

import { Tooltip, TooltipTrigger } from '@helixui/core'

status: stable · since: 0.1.0

Tags: hint, label, on-hover, on-focus

Anatomy

[ trigger ]
   ╭───────────╮
   │ small text │
   ╰─▽─────────╯

Layout

• display — portal
• width — content
• height — content
• intrinsicSize — small floating label
• stackable — false
• fullBleed — false

Visual

A small dark surface with light text and an arrow caret pointing at the trigger. Appears on hover and focus, hides on blur or after a delay.

Props

Name	Type	Default	Description
placement	'top' | 'bottom' | 'start' | 'end'	top	Anchor placement.
delay	number	300	Open delay in ms.
closeDelay	number	100	Close delay in ms.

Slots

• TooltipTrigger child — the focusable element being described
• Tooltip child — the floating label

Tokens used

color.bg.surface.inverse, color.text.inverse, radius.sm, space.2, font.family.sans, font.size.xs, font.weight.medium

Accessibility

Notes

• Tooltips appear only on hover/focus and never replace a label. Use aria-label for naming.
• Tooltip content must be plain text. For richer content use a Popover with role="dialog".

Composes with

Component	Relation	Note
IconButton	wraps	Most common — explain what the icon means.
Popover	alternative	Use Popover for richer interactive content.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

explain an icon button

“tooltip on a settings icon button”

<TooltipTrigger>
  <IconButton aria-label="Settings"><GearIcon /></IconButton>
  <Tooltip>Open settings</Tooltip>
</TooltipTrigger>

Related

• Popover
• IconButton