Wensity

Tooltip

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

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

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>
  );
}