Tooltip

ToggleArea Chart

Four placements, shown on hover and focus.

Tooltip on topTooltip on bottomTooltip on leftTooltip on right

Installation

pnpm add krz-ui

Usage

import { Tooltip } from "krz-ui";
<Tooltip content="Copy to clipboard">
  <Button variant="ghost">Copy</Button>
</Tooltip>

API Reference

PropTypeDescription
contentReactNodeTooltip content.
placement"top" | "bottom" | "left" | "right"Position relative to the trigger.
delaynumberDelay in ms before showing. Defaults to 150.
className / style / ref—All go to the wrapper around the trigger. Style the floating part with classNames.content. See Customization.
classNames{ content? }Extra classes for inner parts.