Tooltip
A simple tooltip component that displays additional information on hover.
Hover me
Hover me
Hover me
The Tooltip component provides a lightweight and customizable tooltip that appears when hovering over an element.
It supports various positions and colors.
Usage
javascript
1import Tooltip from "@/components/atoms/Tooltip"; 2 3<Tooltip text="This is a tooltip"> 4 <div> 5 Hover me 6 </div> 7</Tooltip>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The element that triggers the tooltip on hover. |
| text | string | "" | The text to display inside the tooltip. |
| position | "top" | "bottom" | "left" | "right" | "top" | The position of the tooltip relative to the target element. |
| color | string | "primary" | Tailwind color key used for the toggle switch. |
| variant | "solid" | "soft" | "solid" | The variant of the tooltip. |
| borderRadius | string | "lg" | The border radius of the tooltip. |
| border | boolean | false | Whether to add a border to the tooltip. |
| className | string | "" | Additional Tailwind classes for the tooltip. |
| ...props | object | - | Any other valid HTML <div> attributes (e.g. role, aria-*, etc.). |
Examples
Basic Tooltip
Tooltip with Custom Position
Hover here
Tooltips with Different Colors
Hover me for soft red
Hover me for green