Hint

Copy Markdown

Minimal tooltip for showing information.

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

PreviewCode

Hover

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/hint

Hint
├── HintTrigger
└── HintContent

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

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

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

Pass open and onOpenChange to controlled hint.

PreviewCode

Hover/Click to show hint Show hint

PreviewCode

Left

Top

Bottom

Right

Root wrapper. Provides hint context to trigger and content.

Attribute	Type	Default
`--gutter`	`string`	`10px`

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

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

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`	-

[

Frame ](/docs/components/frame)[

Hover Card ](/docs/components/hover-card)

On This Page