Tooltip

Tooltip with motion: it springs out of its trigger from the side it opens on, and when its words change it glides to their width as they rise in.

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

Installation

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

Adds components/dashral/motion/tooltip.tsx, the Tooltip it builds on (in components/dashral/), motion and the motion files every motion component shares. With the registry in your components.json:

$ pnpm dlx shadcn@latest add @dashral/motion-tooltip

Usage

The same as Tooltip, imported from components/dashral/motion/: swap the import and it moves.

example.tsx

1import { Tooltip } from "@/components/dashral/motion/tooltip"
2
3<Tooltip content={copied ? "Copied" : "Copy"}>
4  <Button size="icon" aria-label="Copy"><Copy /></Button>
5</Tooltip>

Examples

Copy, then Copied

Copy pops a tick in and the tooltip glides to Copied; New link works for a moment and the new link rises in.

Invite link

acme.app/join/7f3k2q

Following the pointer

follow on a chart: the tooltip trails the pointer across the bars on a soft spring, its words crossing over to each month's number.

Signups, 2026

JanDec

Every side

A control on each side of a card: each tooltip springs out from its side, and clicking swaps its icon and words in place.

Revenue reportAlerts when revenue moves 10%

Compared with Default

Default

Fades and zooms in from 95%, sliding 4px from its side.

Motion

Springs out of its trigger from its own side with a touch of overshoot; new words rise in while it glides to their width; with follow, it trails the pointer.

How the two editions differ in general, and which to use where: Motion.

API reference

Every prop of Tooltip, and every attribute of the element it renders. What the Motion edition adds is marked Motion.

Tooltip

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

Prop	Type	Default
`follow`	`boolean` `Motion` Trails the pointer along its trigger on a soft spring, for a wide trigger such as a chart.	`false`
`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.	—

Motion

It grows from 90% at the point facing its trigger, starting 4px back toward it, on a quick spring (--duration-standard, a hint of overshoot).
It leaves faster than it came (--duration-fast, --ease-exit), back the way it arrived.
When its content is text and changes while it shows, the new words rise 4px as they fade in and the tooltip glides to their width (no overshoot), staying centred.
With follow, it trails the pointer along the trigger (across for top and bottom, down for the sides) on a soft spring, within the trigger's ends; it opens already by the pointer.
With reduced motion it only fades, the width follows at once, and it doesn't follow.