Tooltip

Explains a control on hover or keyboard focus. A real element describes its trigger.

Preview

In action

Hint

Hover the measure.

When to use

Use it for

A short label for an icon-only or terse control.
Text that adds to the name, never text that replaces it.

Not for

Content that must be read to operate the control; put it in view.
Rich content; use HoverCard.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Button, Tooltip } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/tooltip.

2. Vendor the source

npx @noorddev/vlak-cli add tooltip

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/tooltip.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Button, Tooltip } from "@noorddev/vlak-react";

<Tooltip tip="Copy to clipboard">
  <Button variant="ghost" size="sm" aria-label="Copy">Copy</Button>
</Tooltip>

Props

Tooltip

Prop	Type	Default	Description
`tip`required	`string`		Tip text. Shown on hover and on keyboard focus; Escape hides it.

Also accepts HTMLAttributes<HTMLSpanElement>.

Keyboard

Keys	Does
`Tab`	Focuses the trigger and shows the tip
`Escape`	Hides the tip until the pointer leaves

Accessibility

The tip is a real element with role="tooltip", linked to the trigger through aria-describedby.
An element child is described directly (and given tabIndex when it cannot take focus); a text child makes the wrapper the trigger.
Shown on hover and focus; the bubble stays hoverable.

Markup

<span class="rs-tip"><button class="rs-btn-ghost rs-btn-sm" aria-describedby="copy-tip">Copy</button><span class="rs-tip-bubble" role="tooltip" id="copy-tip">Copy to clipboard</span></span>

Classes

.rs-tip.rs-tip-bubble

Depends on

/button