Tooltip

A short hint shown on hover or keyboard focus.

$ pnpm dlx shadcn@latest add https://dashral.com/r/tooltip.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/tooltip.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/tooltip

Usage

example.tsx

1import { Link2 } from "lucide-react"
2import { Button } from "@/components/dashral/button"
3import { Tooltip } from "@/components/dashral/tooltip"
4
5<Tooltip content="Copy link">
6  <Button size="icon" variant="ghost" aria-label="Copy link">
7    <Link2 />
8  </Button>
9</Tooltip>

Examples

Editor toolbar

Icon buttons named by their tooltip, with the keyboard shortcut beside the name.

API reference

Tooltip

Also takes every prop of Radix Tooltip(opens in a new tab).

Prop	Type	Default
`content`	`ReactNode` What it says. Required.	—
`children`	`ReactElement` The control it describes; it must take a ref and focus.	—
`side / align`	Where it shows.	`"top" / "center"`
`delay`	`number` Milliseconds the pointer rests before it opens.	`0`
`className`	`string` The tooltip's classes.	—

Keyboard

Keys	Action
`Tab`	Focusing the trigger shows it
`Escape`	Hide it

Accessibility

Describes the trigger (aria-describedby). Only for short hints: no links or buttons inside, and never the only label of an icon button — give that an aria-label too.

Motion

Opens with a fade, a scale from 95%, a 2px blur clearing and a 4px slide from its trigger's side, on the spring (--duration-standard); closes faster (--duration-fast, --ease-exit). No blur with reduced motion.