Tooltip
A lightweight popup that provides helpful information on hover or focus. Built on Radix UI with customizable positions, sizes, and animations.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Tooltip component
Copy this code to create your Tooltip component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Positions
Tooltips can be positioned in different directions around the trigger element.
Sizes
Tooltips come in different sizes to accommodate various content needs.
Animations
Various animations can be applied to tooltips when they appear and disappear.
API Reference
The Tooltip component is built on top of the Radix UI Tooltip primitive and extends its functionality with additional styling options and features.
Tooltip.Provider
Provider component that shares tooltip settings across all tooltips in its scope.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
delayDuration | "number" | "700" | Default delay duration for all tooltips (ms) |
skipDelayDuration | "number" | "300" | Skip delay when quickly moving between tooltips (ms) |
disableHoverableContent | "boolean" | "false" | Prevents hovering content from keeping tooltip open |
Tooltip.Root
The main container component that manages the tooltip state.
See Radix UI docs for base props. Only extended props shown below.
| Prop | Type | Default | Description |
|---|---|---|---|
delayDuration | "number" | "200" | Delay in ms before showing tooltip |
skipDelayDuration | "number" | "300" | Skip delay when quickly moving between tooltips (ms) |
Tooltip.Trigger
The element that triggers the tooltip to appear when hovered or focused.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | "boolean" | "false" | Merges props onto child element |
Tooltip.Content
The content displayed when the tooltip is visible.
See Radix UI docs for base props. Only extended props shown below.
| Prop | Type | Default | Description |
|---|---|---|---|
showArrow | "boolean" | "true" | Whether to show the arrow indicator |
unstyled | "boolean" | "false" | Removes default styling |
animation | "fade""scale""slide" | "slide" | Animation style when opening/closing |
size | "small""medium""large" | "medium" | Size variant of the tooltip |
position | "top-left""top-center""top-right""bottom-left""bottom-center""bottom-right""left""right" | "top-center" | Position relative to the trigger |