Tooltip
Tooltips provide brief, helpful information when users hover over or focus on an element. Use them to clarify icon buttons, explain features, or give additional context without cluttering the UI.
Tooltip Playground
Tooltip Playground
Preview
Code
Controls
Type:
Plain
Rich
Installation
You can add the tooltip component to your project manually:
1
Install the following dependencies:
npm
pnpm
yarn
bun
npm install class-variance-authority clsx tailwind-merge react-aria-components2
Copy and paste the following code into your project.
Tooltip.tsx
cn.ts
Loading source code...
3
Update the import paths to match your project setup.
Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.
Basic Usage
Wrap any element with Tooltip to show information on hover:
import { Tooltip } from '@versaui/ui/components/Tooltip';
import { Button } from '@versaui/ui/components/Button';
<Tooltip content="Save your changes">
<Button>Save</Button>
</Tooltip>Types
Plain
Simple text tooltip (default):
<Tooltip content="Quick hint about this action">
<Button>Plain</Button>
</Tooltip>Rich
Tooltip with a title and content:
<Tooltip
type="rich"
title="Feature Title"
content="Detailed explanation of this feature."
>
<Button>Rich</Button>
</Tooltip>Placement
Position the tooltip in 8 different directions:
<Tooltip placement="top" content="Above">...</Tooltip>
<Tooltip placement="top start" content="Above left">...</Tooltip>
<Tooltip placement="top end" content="Above right">...</Tooltip>
<Tooltip placement="bottom" content="Below">...</Tooltip>
<Tooltip placement="bottom start" content="Below left">...</Tooltip>
<Tooltip placement="bottom end" content="Below right">...</Tooltip>
<Tooltip placement="left" content="Left side">...</Tooltip>
<Tooltip placement="right" content="Right side">...</Tooltip>Offset
Adjust the distance between the tooltip and trigger:
<Tooltip offset={4} content="Closer">...</Tooltip>
<Tooltip offset={16} content="Further away">...</Tooltip>Controlled State
For controlled visibility, use the isOpen prop:
const [showTooltip, setShowTooltip] = useState(false);
<Tooltip isOpen={showTooltip} content="Controlled tooltip">
<Button>Target</Button>
</Tooltip>
<Button onClick={() => setShowTooltip(!showTooltip)}>
Toggle Tooltip
</Button>Accessibility
- Keyboard navigation: Tooltip appears when trigger receives focus
- Content is announced via
aria-describedby - Instant show/hide for better responsiveness
- Works with both mouse and keyboard interactions
Tooltip Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'plain' | 'rich' | 'plain' | Content type. Rich includes a title. |
placement | 'top' | 'top start' | 'top end' | 'bottom' | ... | 'top' | Position relative to trigger element. |
title | string | 'Title' | Title text (only for rich type). |
content | string | — | Tooltip content text. |
offset | number | 8 | Distance from the trigger element in pixels. |
maxWidth | number | 232 | Maximum width of tooltip (plain type only). |
isOpen | boolean | — | Controlled visibility state. |
children | ReactNode | — | Trigger element that activates tooltip on hover/focus. |