primitives

Tooltip

On-hover label for icons and constrained controls. For long-form context use a Popover; never use a Tooltip to hide critical information.

Always wrap your tree in `TooltipProvider` once at the app root (AppShell already does this). Tooltips have no arrow by design — bordered floating body reads cleanly without one.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/tooltip.json

Or import from the workspace package:

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@8maverik8/design";

Examples

On a button

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline" size="icon-sm">⌘K</Button>
    </TooltipTrigger>
    <TooltipContent>Open command palette</TooltipContent>
  </Tooltip>
</TooltipProvider>

Guidelines

Use for icon-only buttons, truncated labels, and dense table cells.
Put a button or link inside `TooltipContent`.Tooltips disappear on focus loss and can't be reached by keyboard. Interactive content belongs in a Popover.
Keep the content under ~80 characters and never essential to the workflow.Touch users can't hover.