Hint

A lightweight, minimal tooltip that shows information.

For the full Tooltip component, check out the Tooltip component.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/hint.json


import { Hint, HintTrigger, HintContent } from "@/components/ui/hint";


<Hint>
  <HintTrigger />
  <HintContent />
</Hint>

Hint: A lightweight, minimal tooltip that shows information
Tooltip: A more complex component that provides a more full-featured tooltip with a variety of options.

Pass open and onOpenChange to controlled hint.

Root wrapper. Provides hint context to trigger and content.

Attribute	Default
`--offset`	From `positioning.offset` (default `10px`)

Shows the hint on hover or focus. Button by default; use asChild for custom elements.

Prop	Type	Default
`className`	`string`	-

Hint content shown in a popover on hover or focus.

Arrow pointing to the trigger. Rendered inside HintContent by default.

Prop	Type	Default
`className`	`string`	-

On This Page