Tooltip
The Tooltip component displays additional information when users interact with an element, such as hovering, clicking, or focusing. It supports customizable triggers, placements, and styles, making it a versatile tool for enhancing user experience.
Usage
First of all, you need to import the Tooltip component from the kitchn package.
import { Tooltip } from "kitchn"Default
Trigger
With Components
Custom Content
Types
Placement
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
text | React.ReactNode | undefined | Yes | The content to display inside the tooltip. |
placement | TooltipPlacement | "top" | No | Specifies where the tooltip should appear relative to the target element (top, right, bottom, left). |
type | TooltipTypes | "primary" | No | Defines the tooltip's color from accent colors |
visible | boolean | undefined | No | Controls the visibility of the tooltip programmatically. |
initialVisible | boolean | false | No | Sets the initial visibility state of the tooltip. |
hideArrow | boolean | false | No | Hides the tooltip's arrow if set to true. |
trigger | TooltipTriggers | "hover" | No | Specifies the event that triggers the tooltip to appear (hover, click, focus). |
enterDelay | number | 150 | No | Delay in milliseconds before the tooltip becomes visible. |
leaveDelay | number | 150 | No | Delay in milliseconds before the tooltip disappears. |
offset | number | 12 | No | Offset distance between the tooltip and the target element. |
onVisibleChange | TooltipOnVisibleChange | () => {} | No | Callback function invoked when the tooltip visibility changes. |
onContentClick | TooltipOnContentClick | () => {} | No | Callback function invoked when the tooltip content is clicked. |