Primitives

Tooltip

Hover popover on Radix, on the overlay surface like every other overlay. Wrap your app in TooltipProvider once at the root. TooltipShortcut is a Kbd.

view .md

Preview

live

Installation

terminal

bash

npx @entrepta/cli@latest add tooltip

Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

tooltip.tsx

tsx

import {
  TooltipProvider, Tooltip, TooltipTrigger,
  TooltipContent, TooltipShortcut,
} from "@/components/entrepta/tooltip"

// In root layout:
<TooltipProvider>
  {children}
</TooltipProvider>

// Usage:
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost" size="sm">⌘K</Button>
  </TooltipTrigger>
  <TooltipContent>
    open command palette <TooltipShortcut>⌘K</TooltipShortcut>
  </TooltipContent>
</Tooltip>

Props

Prop	Type	Default	Description
delayDuration	number	200	Delay in ms before tooltip opens (TooltipProvider)
side	"top" \| "bottom" \| "left" \| "right"	"top"	Placement relative to trigger (TooltipContent)
sideOffset	number	8	Gap in px from trigger (TooltipContent)
surface	"page" \| "dark"	"page"	page follows the mode of the page it opens over. dark stays near black in both modes (TooltipContent)