Component

Tooltip

A lightweight tooltip for icon buttons and compact controls.

Preview

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Tooltip } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/tooltip.json

Copied source import

code

import "@/styles/axie.css";import { Tooltip } from "@/components/axie/tooltip";

Prefer @axie/tooltip? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Tooltip } from "axie-ui";export function Example() {  return (    <Tooltip content="Review syncing status before closing.">      <button type="button">Hover me</button>    </Tooltip>  );}

Accessibility

Tooltips should supplement visible UI, not contain required instructions.
Make tooltip content available on focus as well as hover.
Keep tooltip copy short enough to read before pointer movement closes it.

API Reference

Prop	Type	Default	Description
content	ReactNode	-	Small hover/focus content.
children	ReactNode	-	Trigger element.