Skip to main content

Tooltip

Information tooltip on hover/focus. Built on Radix UI Tooltip.

Import

import { Tooltip } from '@kikumi3n/ui';

Usage

<Tooltip content="Delete this item">
<IconButton icon={<TrashIcon />} aria-label="Delete" />
</Tooltip>

Positions

<Tooltip content="Top" position="top">...</Tooltip>
<Tooltip content="Bottom" position="bottom">...</Tooltip>
<Tooltip content="Left" position="left">...</Tooltip>
<Tooltip content="Right" position="right">...</Tooltip>

API

PropTypeDefaultDescription
contentReactNoderequiredTooltip content
position'top' | 'bottom' | 'left' | 'right''top'Tooltip position
delaynumber200Show delay (ms)
childrenReactNoderequiredTrigger element