Documentation
Tooltip

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

NameTypeDefaultRequiredDescription
textReact.ReactNodeundefinedYesThe content to display inside the tooltip.
placementTooltipPlacement"top"NoSpecifies where the tooltip should appear relative to the target element (top, right, bottom, left).
typeTooltipTypes"primary"NoDefines the tooltip's color from accent colors
visiblebooleanundefinedNoControls the visibility of the tooltip programmatically.
initialVisiblebooleanfalseNoSets the initial visibility state of the tooltip.
hideArrowbooleanfalseNoHides the tooltip's arrow if set to true.
triggerTooltipTriggers"hover"NoSpecifies the event that triggers the tooltip to appear (hover, click, focus).
enterDelaynumber150NoDelay in milliseconds before the tooltip becomes visible.
leaveDelaynumber150NoDelay in milliseconds before the tooltip disappears.
offsetnumber12NoOffset distance between the tooltip and the target element.
onVisibleChangeTooltipOnVisibleChange() => {}NoCallback function invoked when the tooltip visibility changes.
onContentClickTooltipOnContentClick() => {}NoCallback function invoked when the tooltip content is clicked.