Tooltip
Rich tooltip card for product tours, feature walkthroughs, and contextual help. Supports title, image, subtitle, description, keyboard shortcuts, step counter, navigation buttons, a close button, 5 intent colors, 6 rounded variants, and all 12 arrow positions.
Playground
Installation
pnpm add @tessinaui/uiUsage
import { Tooltip } from "@tessinaui/ui";{/* Minimal */}
<Tooltip title="Feature name" description="A brief explanation." onClose={() => {}} />
{/* Full product tour step */}
<Tooltip
intent="warning"
arrowSide="bottom"
arrowAlign="center"
title="Title Placeholder Text"
titleIcon={<CircleAlert className="w-5 h-5" />}
image={<img src="..." className="w-full aspect-video object-cover" />}
subtitle="Step title"
subtitleIcon={<CircleAlert className="w-5 h-5" />}
step={{ current: 2, total: 8 }}
shortcuts={["⌘", "U"]}
description="Learn how to use this feature."
paginationText="1 of 4"
onClose={() => {}}
primaryAction={{ label: "Back", leadingIcon: <ChevronLeft />, onClick: handleBack }}
secondaryAction={{ label: "Skip", onClick: handleSkip }}
ctaAction={{ label: "Next", trailingIcon: <ChevronRight />, onClick: handleNext }}
/>Examples
Default
The simplest usage — a title, description, and a close button.
Intents
Five intent colors — none, error, warning, success, and info.
Arrow
A pointing arrow on any of the four sides via arrowSide.
Product tour
A full walkthrough step with icon, subtitle, shortcut, step counter, and navigation buttons.
Footer actions
Footer buttons drive decision flows like confirm/cancel or multi-way choices.
Loading
Skeleton placeholders matching the card chrome across all three sizes.
API Reference
Tooltip props
Content slots
| Prop | Type | Description |
|---|---|---|
title | ReactNode | Header title text |
titleIcon | ReactNode | Icon shown before the title |
subtitle | ReactNode | Subheader label (inside content area) |
subtitleIcon | ReactNode | Icon shown before the subtitle |
description | ReactNode | Body paragraph text |
image | ReactNode | Image/media slot — rendered in a rounded container |
shortcuts | string[] | Keyboard shortcut keys (e.g. ["⌘", "U"]) rendered as Key badges |
step | { current: number; total: number } | Step counter shown in subheader row (e.g. "2 of 8") |
paginationText | string | Footer step label (e.g. "1 of 4") |
Actions
| Prop | Type | Description |
|---|---|---|
onClose | () => void | Shows close (×) button when provided |
primaryAction | TooltipAction | Left footer button (outline style) — e.g. Cancel, Back |
secondaryAction | TooltipAction | Middle footer button (neutral fill) — e.g. Skip, Maybe later |
ctaAction | TooltipAction | Right footer button (dark fill) — e.g. Confirm, Save, Next |
Visibility overrides
All slots are shown automatically when their content is provided. Pass false to explicitly hide.
| Prop | Type | Default |
|---|---|---|
showImage | boolean | auto |
showTitle | boolean | auto |
showSubtitle | boolean | auto |
showDescription | boolean | auto |
showShortcuts | boolean | auto |
showStep | boolean | auto |
showFooter | boolean | auto |
showClose | boolean | auto |
Style
| Prop | Type | Default | Description |
|---|---|---|---|
intent | "none" | "error" | "warning" | "success" | "info" | "none" | Card background color |
rounded | "none" | "sm" | "md" | "lg" | "xl" | "full" | "full" | Card border radius |
size | "sm" | "md" | "lg" | "lg" | Card width (256 / 320 / 384px). sm stacks footer buttons vertically; md/lg lay them out horizontally. Shortcut key badges scale with size (xs / sm / md). |
Arrow
12 positions: 4 sides × 3 alignments.
| Prop | Type | Default | Description |
|---|---|---|---|
arrowSide | "top" | "right" | "bottom" | "left" | "none" | "none" | Which edge the arrow appears on |
arrowAlign | "start" | "center" | "end" | "center" | Alignment along that edge |
Direction
| Prop | Type | Default |
|---|---|---|
dir | "ltr" | "rtl" | "ltr" |
TooltipAction type
interface TooltipAction {
label: string;
leadingIcon?: React.ReactNode;
trailingIcon?: React.ReactNode;
onClick?: () => void;
/** Override button style. Defaults: primary=outline, secondary=ghost, cta=primary. */
variant?: "primary" | "secondary" | "ghost" | "outline";
/** Override button intent color. */
intent?: "none" | "error" | "warning" | "success" | "info";
/** Override border radius. Defaults to "full". */
rounded?: "none" | "sm" | "md" | "lg" | "full";
disabled?: boolean;
loading?: boolean;
}Toolbar
Container for grouping a set of controls — buttons, toggles, links, inputs, separators. Wraps `@base-ui/react/toolbar` for keyboard focus management. Four variants, three sizes, five rounded values, horizontal (with overflow wrap) + vertical orientation, LTR/RTL.
Top Header Desktop
Desktop navigation bar with brand, nav, search, and actions slots. Six variants, five sizes, six rounded options, three nav-position modes (start/center/end), max-width containment, bordered, sticky, skeleton, and full RTL support.