Get Started
Components
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
Usage
import { NTooltip, NButton } from '@nayan-ui/react';const Tooltip = () => {return (<NTooltip message="This is sample tool tip! This is sample tool tip This is sample tool tip This is sample tool tip "><NButton>Show Tooltip</NButton></NTooltip>);};export default Tooltip;
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. |