When should I use Tooltip instead?

Use Tooltip to label one control, like an icon button, where the label should sit beside it and follow its placement rules. Animated Tooltip is a whole row of people, with the label drawn above each avatar. It doesn't flip to stay on screen, so leave room above the row.

shadcn.io is an independent project built on shadcn/ui

Components

Free

Animated Tooltip for Solid

A row of overlapping avatars whose name tooltip swings toward the pointer. For Solid with Ark UI, on a team page, a contributor list or a reviewer row.

Ark UI

A row of overlapping avatars. Point at one and a tooltip with the person's name and role pops up above it, swinging toward the pointer as it moves.

Use it for a team section, the contributors to a project, or the people on a review. The row is built from this library's Avatar, and keyboard focus shows the same tooltip, so in Solid it works without a mouse. For a single icon's label, use Tooltip instead.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

AnimatedTooltip
└── item (one per person)
    ├── trigger
    │   └── Avatar
    └── content (name, designation)

Usage

import {
  AnimatedTooltip, type AnimatedTooltipItem,
} from "@/components/ui/animated-tooltip";

const team: AnimatedTooltipItem[] = [
  {
    designation: "Software Engineer",
    id: 1,
    image: "https://github.com/shadcn.png",
    name: "John Doe",
  },
];

<AnimatedTooltip items={team} />;

Demos

Links

Each person has an href, so each avatar is a link to a GitHub profile instead of a button. The tooltip still names the person and gives a line about them. Use links when the row leads somewhere, such as a profile or a commit history.

PreviewCode

Initials

Three reviewers, two without a photo. With no image, or one that fails to load, the avatar shows the first letters of name. Put the row next to a short label, as here, so it reads as a list of people even before anyone hovers.

PreviewCode

Swing

The same three people, calm and lively. --animated-tooltip-tilt sets how far the tooltip rotates at an avatar's edge (12deg by default) and --animated-tooltip-sway how far it slides (14px). Set them with a class on the row. Keep it subtle where people read the names often.

PreviewCode

FAQ

What data does Animated Tooltip take?

An items array. Each item has an id, a name, a designation and an image URL, plus an optional href. The name is the tooltip's first line and the avatar's accessible name, the designation is the second line and its description. Items render in order, each one overlapping the one before.

Does the tooltip show on keyboard focus in Solid?

Yes. Each avatar is a button, or a link when the item has an href, so Tab reaches it, and the tooltip shows while it has keyboard focus, the same way it shows on hover. Escape hides it until focus or the pointer moves on. The tooltip itself never takes the pointer.

How does the tooltip follow the pointer?

While the pointer moves over an avatar, the item writes one CSS variable, --animated-tooltip-x, from -1 at its left edge to 1 at its right. The tooltip turns and slides by that amount, and a springy easing curve makes it swing past and settle. Nothing re-renders as the pointer moves.

What happens with reduced motion?

The tooltip only fades in and out. It doesn't rise, grow, turn or slide, and the avatar doesn't lift. The names and roles are the same, and so are hover, focus and Escape.

Which Avatar does it use with Ark UI?

The Avatar from this same library, installed with it. Each person is an Avatar with an image and initials as the fallback, 48 pixels wide with a ring in the page's background colour, so the overlap stays clean on any surface. Change the size in the file if your row needs it.

How do I install Animated Tooltip in Solid?

Run the command in the Installation section on this page, which adds AnimatedTooltip to your ui folder and installs Avatar if it isn't there yet. The command uses the shadcn CLI.