AceUi

Tooltip

A accessible tooltip component built with Radix UI that displays helpful information on hover or focus.

The Tooltip component provides contextual information in a floating overlay, built on Radix UI primitives for accessibility and keyboard navigation support

Installation

1npx shadcn@latest add "https://ace-ui-six.vercel.app/r/tooltip.json"

Usage

1import { Tooltip } from "@/components/ui/tooltip";
2import { Copy } from "lucide-react";
3

4export default function Example() {
5return (
6  <div>
7    <Tooltip content="Copy to clipboard">
8      <button className="p-2 rounded hover:bg-gray-100">
9        <Copy className="w-4 h-4" />
10      </button>
11    </Tooltip>
12  </div>
13);
14}

Features

  • Customizable styling with className prop
  • Four positioning sides: top, bottom, left, right
  • Three alignment options: start, center, end
  • Smooth animations with fade and zoom effects
  • Arrow pointer for better visual connection

Notice

This component requires @radix-ui/react-tooltip as a dependency. The tooltip automatically handles collision detection and will flip sides if there's insufficient space.

Props

PropTypeDefaultDescription
childrenReact.ReactNode"Copy"The trigger element that shows tooltip on hover/focus
contentReact.ReactNode"Copy to clipboard"The content displayed inside the tooltip
side'top' | 'bottom' | 'left' | 'right''top'Preferred side for tooltip placement
align'start' | 'center' | 'end''center'Alignment of tooltip relative to trigger
classNamestring—Additional CSS classes for tooltip content

Examples

1// Icon button with tooltip
2<Tooltip content="Save document" side="bottom">
3<button className="p-2 rounded-full hover:bg-gray-100 transition-colors">
4  <Save className="w-5 h-5 text-gray-600" />
5</button>
6</Tooltip>
7

8// Form field help
9<div className="flex items-center gap-2">
10<label htmlFor="email">Email</label>
11<Tooltip content="We'll never share your email address">
12  <HelpCircle className="w-4 h-4 text-gray-400" />
13</Tooltip>
14</div>
15

16// Navigation item
17<Tooltip content="Go to dashboard" side="right">
18<a href="/dashboard" className="p-2 block rounded hover:bg-gray-100">
19  <Home className="w-5 h-5" />
20</a>
21</Tooltip>
22

23// Disabled button explanation
24<Tooltip content="Please fill all required fields to continue">
25<button disabled className="px-4 py-2 bg-gray-300 text-gray-500 rounded cursor-not-allowed">
26  Submit
27</button>
28</Tooltip>