Hint

Minimal tooltip for showing information.

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

Installation


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.

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

On This Page