Tooltip
Displays additional information on hover with customizable positioning, colors, sizes, and styles.
Variants
Radius
Shadows
Positions
Colors
Sizes
Features
- Positioning: Easily customize the position of the tooltip (
top,bottom,left, orright). - Color Variants: The tooltip color can be customized to match your design (
base,primary,secondary,success,warning,danger,light,dark). - Sizes and Radius: You can adjust the size of the tooltip (
sm,md,lg,xl) and its border radius for rounded corners. - Shadows: Add shadow effects to the tooltip to make it stand out.
- Variants: Choose between
solid,outline, orghostfor different tooltip styles. - Customizable Delay: Control the delay before the tooltip appears.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The element that triggers the tooltip when hovered. |
content | string | "Tooltip text" | The text to display inside the tooltip. |
color | `"base" | "primary" | "secondary" |
position | `"top" | "bottom" | "left" |
size | `"sm" | "md" | "lg" |
radius | `"none" | "sm" | "md" |
shadow | `"none" | "sm" | "md" |
variant | `"solid" | "outline" | "ghost"` |
delay | number | 800 | The delay (in milliseconds) before the tooltip appears when the trigger element is hovered. |
className | string | - | Additional CSS class name for styling the tooltip. |