Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/tooltip.json

Usage

Wrap the app (or a section) in `TooltipProvider` to share a delay, then nest `TooltipTrigger` and `TooltipContent` inside each `Tooltip`.

TSImport

import { Tooltip } from "@/components/ui/tooltip";

TSExample

import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";

export function Example() {
  return (
    <Tooltip content="Edit profile" delay={150}>
      <Button variant="outline">Hover me</Button>
    </Tooltip>
  );
}

Composition

Anatomy of the Tooltip primitive.

Tooltip                           (single component — pass content + child trigger)
├── content={<ReactNode>}          (auto-emits Provider + Trigger + Content)
├── shortcut={<Kbd>⌘C</Kbd>}        (rendered after the content body)
├── side / align / sideOffset / alignOffset
├── delay={150}                    (auto-mounts a TooltipProvider)
├── contentClassName               (applied to the popup content)
└── children                       (the trigger element — wrapped via render={…})

Without `content`, Tooltip stays compound — drop in TooltipTrigger +
TooltipContent children manually. The slot exports — TooltipProvider,
TooltipTrigger, TooltipContent — remain available as the escape hatch.

Default

Pass `content` and a single child trigger; the component wraps everything in Provider + Root + Trigger + Content.

Sides

`side="top|right|bottom|left"` anchors the tooltip on a specific edge of the trigger.

With keyboard shortcut

Pass a `<Kbd>` to the `shortcut` prop and the primitive renders it after the content with the right inline styles.

Rich content

Multi-line tooltip with a title and description. Pass JSX for `content` and use `contentClassName` to flex-col.

Icon-only buttons

Pair with `<Button size="icon-sm" aria-label=…>` so keyboard users still hear the action while sighted users see the tooltip.

Popover variant — educational info

`variant="popover"` swaps the dark hover pill for a richer popover that opens on hover or click. Omit `children` to get an inline Info icon trigger ready to drop next to a label, hint, or section header. For bullet lists, pass JSX `<ul><li>…</li></ul>` as `content`, or — when copy comes from a CMS — pass a plain string with `• ` markers (or `\n- ` / `\n* ` lines) and the popover renders a real `<ul>` for you. Raw HTML strings (`<ul>`, `<br>`, `<em>`) render as text, so convert them to JSX or the bullet-string shortcut at the call site.

Member tier

Activity growth — Incremental

What's included?

API Reference

Props exposed by the Tooltip component.

Prop	Type	Default	Description
`content`	ReactNode	—	Body of the tooltip. When set, switches to the flat layout (auto-mounts Provider + Trigger + Content).
`shortcut`	ReactNode	—	Trailing keyboard hint — typically a `<Kbd>` element rendered after the content.
`side`	"top" \| "right" \| "bottom" \| "left"	"top"	Edge of the trigger to anchor against.
`sideOffset`	number	4	Pixel gap between trigger and tooltip on the chosen side.
`align`	"start" \| "center" \| "end"	"center"	Alignment along the chosen side.
`alignOffset`	number	0	Pixel offset along the alignment axis.
`delay`	number	—	Show delay in ms — applied via the auto-mounted TooltipProvider.
`contentClassName`	string	—	Class names applied to the tooltip popup content.
`open`	boolean	—	Controlled open state.
`onOpenChange`	(open: boolean) => void	—	Fires when the tooltip opens or closes.