Tooltip

Show a short explanation on hover with collision handling and smooth switching.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Tooltip for a short supplemental hint on an existing control. Do not put essential content only in a Tooltip. For forms, menus, or complex content, prefer Popover or Dialog.

Place Tooltip inside its trigger element; it does not wrap the trigger. When children is omitted, Tooltip reads the trigger text.
Without an explicit open value, hover controls visibility. When open is explicitly true or false, the page controls it. Keep essential content and actions available outside the hint.

Import

import { Tooltip } from '@snowui-design-system/components';

Usage

Variants

Continuous motion

Positions

Open

Wrapping and viewport edges

API Reference

Property	Type	Default	Example	Description
`position`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	`position="top"`	Preferred popup direction. When space is short, the panel flips or shifts within the viewport safe area and enters from its final direction.
`open`	`boolean`	`—`	`open`	Bindable controlled visibility. Without it, parent-trigger hover uses a shared Portal. Explicit true or false uses an independently controlled Portal without hover delay or pointer-speed sampling.
`offset`	`number`	`4`	`offset={42}`	Target gap from the trigger along the popup direction, in pixels. Viewport collision rules still constrain the final position.
`maxWidth`	`number`	`360`	`maxWidth={42}`	Maximum outer bubble width in pixels, also limited by a 16px safe area on every visible viewport edge.
`variant`	`"dark" \| "light"`	`"light"`	`variant="dark"`	Appearance variant, light by default or explicitly dark.
`dismissOnMotion`	`boolean`	`true`	`dismissOnMotion`	In uncontrolled hover mode, hide immediately when the trigger or an ancestor starts motion, or a descendant starts a geometric transition. Decorative descendant animation and Button content scaling do not close it because the trigger anchor does not move.
`widthRebound`	`boolean`	`false`	`widthRebound`	Enable width overshoot and rebound while switching continuously between Tooltip targets. Off by default.
`rapidRetarget`	`boolean`	`true`	`rapidRetarget`	While a transition is running, use a fast 90–160ms cubic ease-out baseline for another target change. When off, use the usual coordinated 120–180ms baseline. Effective pointer speed may shorten either to 60ms.
`children`	`Snippet`	`—`	`<Tooltip>Content</Tooltip>`	Hint content without arguments; text or public components. When omitted, reads text from the parent trigger. Tooltip is placed inside the trigger rather than wrapping it.