Wensity

Tooltip

Contextual hints carrying rich content, keyboard shortcut labels, and optional cursor tracking as you move across.

tooltiphintshortcuthelpoverlayaccessible
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

Infotip with links via Popover openOnHover (not Tooltip).

Requires: popover

examples/tooltip-interactive.tsx
import { Popover, PopoverContent, PopoverTrigger } from "@/components/wensity/popover";


export function InteractiveTooltip() {
  return (
    <Popover>
      <PopoverTrigger openOnHover delay={200}>Status</PopoverTrigger>
      <PopoverContent>
        <a href="/billing">Manage billing</a>
      </PopoverContent>
    </Popover>
  );
}

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add tooltip

Usage

Import Tooltip from @/components/wensity/tooltip and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/wensity/tooltip";


export function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover</TooltipTrigger>
        <TooltipContent>Helpful hint</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Props

PropTypeDefaultDescription
openboolean-Controlled open state.
defaultOpenboolean-Initial open state when uncontrolled.
onOpenChange(open: boolean) => void-Called when the tooltip opens or closes.
followCursorbooleanfalseTracks the pointer while open. Disabled automatically under reduced motion.