Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Hint for React Radix UI

Minimal tooltip for showing information.

Framework
UI library

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/hint.json

Usage

import { Button } from "@/components/ui/button";
import {
  Hint,
  HintContent,
  HintTrigger,
} from "@/components/ui/hint";
<Hint>
  <HintTrigger asChild>
    <Button variant="outline">Hover</Button>
  </HintTrigger>
  <HintContent>This is a hint</HintContent>
</Hint>

Accessibility

KeyDescription
Enter
Activate the focused control.
Space
Activate the focused control.

Demos

Controlled

Positions

API Reference

Hint

div

PropType

HintTrigger

button

PropType
className?string
AttributeType
CSS variableType
--gutterstring

HintContent

div

PropType
AttributeType
data-placement?string

HintArrow

div

PropType
AttributeType
data-placement?string