Tooltip

A short hint on hover or focus. Focus opens it immediately — a keyboard user has already committed — while pointer hover waits, so sweeping across a toolbar does not fire a row of them.

src/components/ui/tooltip.tsx

About

From the component's own source, where it was written.

A short hint shown on hover or focus.

Focus opens it without a delay — a keyboard user has already committed, and making them wait is just latency. Pointer hover waits, so sweeping across a toolbar does not fire a row of tooltips.

The trigger is cloned rather than wrapped, so the tooltip adds no element to the layout and cannot break a flex or grid parent.

Install

npx astralyx-ui add tooltip

Usage

import { Tooltip } from '@/components/ui/tooltip'

<Tooltip content="Copy to clipboard">
  <Button size="icon"><Copy /></Button>
</Tooltip>

Composer

Change the props and the source below follows.

Props

side

delay

content

tsx

<Tooltip content="Copy to clipboard">
  <Button variant="outline">Hover me</Button>
</Tooltip>

Examples

Sides

tsx

<Tooltip content="Hint" side="right">…</Tooltip>

On an icon button

tsx

<Tooltip content="More information">
  <Button size="icon" variant="ghost"><Info /></Button>
</Tooltip>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Tooltip`

A short hint shown on hover or focus.

Extends Omit<ComponentProps<'div'>, 'content'>.

Prop	Type	Default	Description
children	ReactNode	required	The trigger. Cloned rather than wrapped, so the tooltip adds no element to the layout.
content	ReactNode	required	What the tooltip says.
side	Side	'top'	Preferred side; flips when it would overflow.
align	Align	'center'	—
delay	number	400	Pointer-hover delay in ms. Focus ignores it.
offset	number	6	—