Tooltip
A Tooltip component is a small, informative pop-up that appears when a user hovers over or focuses on an element, such as a button or icon. It provides additional context or explanations about that element without cluttering the interface. Tooltips enhance user experience by offering helpful hints, instructions, or details, ensuring that information is accessible without overwhelming the layout.
# Demo
Demo Coming Soon
Tooltip examples will be available soon.
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| message | React.ReactNode | Required | Tooltip message or content. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| triggerClassName | string | ' ' | You can customise by passing tailwind classes. |
| children | React.ReactNode | Required | Tooltip trigger content. |
| placement | 'top' | 'bottom' | 'left' | 'right' | Optional | Placement of the tooltip. |
| delayShow | number | Optional | Delay in ms before showing. |
| delayHide | number | Optional | Delay in ms before hiding. |
| id | string | Optional | ID for accessibility. |
| ariaLabel | string | Optional | ARIA label for accessibility. |
| triggerProps | React.HTMLAttributes<HTMLElement> | Optional | Props for trigger element. |
| contentProps | React.HTMLAttributes<HTMLDivElement> | Optional | Props for content element. |
# Tags