Tooltip

Contextual hints with rich content, shortcuts, and cursor tracking.

Loading preview...

Examples

Practical examples and common states for the same installable component.

Default

Single-line hint on hover and keyboard focus.

examples/tooltip-default.tsx
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/wensity/tooltip";
export function DefaultTooltip() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipContent>Help text</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}

Rich

Title plus supporting description for dense toolbars.

examples/tooltip-rich.tsx
import { TooltipProvider, TooltipRich } from "@/components/wensity/tooltip";
export function RichTooltip() {
return (
<TooltipProvider>
<TooltipRich title="Bold" description="Apply strong emphasis to selection.">
<button type="button">B</button>
</TooltipRich>
</TooltipProvider>
);
}

Shortcut

Inline keyboard glyphs for command hints.

examples/tooltip-shortcut.tsx
import { TooltipProvider, TooltipShortcut } from "@/components/wensity/tooltip";
export function ShortcutTooltip() {
return (
<TooltipProvider>
<TooltipShortcut label="Italic" shortcut={["⌘", "I"]}>
<button type="button">I</button>
</TooltipShortcut>
</TooltipProvider>
);
}

Follow cursor

Tooltip position tracks pointer for canvas UIs.

examples/tooltip-follow-cursor.tsx
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/wensity/tooltip";
export function CursorTooltip() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>Canvas</TooltipTrigger>
<TooltipContent followCursor>Coordinates</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}

Interactive

Pointer can enter the tooltip for links and actions.

examples/tooltip-interactive.tsx
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/wensity/tooltip";
export function InteractiveTooltip() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>Status</TooltipTrigger>
<TooltipContent interactive>
<a href="/billing">Manage billing</a>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}