Tooltip

Hover and focus previews built with the Card component.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/tooltip.json

Usage

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

<Tooltip content="Copy this snippet" side="top">
  <button type="button">Copy</button>
</Tooltip>

<Tooltip
  side="right"
  className="w-60"
  title="Overview"
  description="A rich preview inside a Card."
  icon={<span>⌘</span>}
>
  <a href="/overview">Overview</a>
</Tooltip>

Props

| Prop | Default | Description | | --- | --- | --- | | children | Demo button | One focusable element that forwards DOM props, such as a button or Next.js Link. | | title | — | Prominent heading with stronger weight and foreground color. | | description | — | Supporting text with softer contrast and comfortable line spacing. | | icon | — | Optional icon in an accent-colored container. | | content | Demo text when no title or description | Plain tooltip text or extra noninteractive content. | | side | "top" | "top", "right", "bottom", or "left". | | sideOffset | 10 | Gap from the trigger in pixels. | | className | — | Additional classes on the Card. |

Setup notes

The registry includes the existing Card component. No tooltip library or provider is required.

The preview opens on hover or keyboard focus, stays open when the pointer moves onto it, and closes with Escape. Existing aria-describedby references on the trigger are preserved. Use a popover or dialog for interactive content.

Tooltips are positioned relative to their triggers. Allow overflow on parent containers and choose a side with enough room; this component does not portal or automatically flip at viewport edges.