Tooltip

Short label on hover and on keyboard focus, flipped to stay inside the viewport.

Source: 1 file
Dependencies: none
Playground: no

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

01Side

<TooltipContent side="top | bottom | left | right" />

02Align

<TooltipContent align="start | center | end" />

03Trigger

<Tooltip trigger="hover | click | focus | contextMenu" />

04Arrow

<Tooltip showArrow={true | false} />

05Color

<Tooltip color="#6d28d9" />

06Delay

<Tooltip delayDuration={300} />

07Controlled

<Tooltip open={open} onOpenChange={setOpen} />

08Rich content

<TooltipContent>{...}</TooltipContent>

09Variant

<Tooltip variant="primary | success | warning | destructive | info" />

10Radius

<TooltipContent radius="none | sm | md | lg | full" />

11Size

<TooltipContent size="sm | md | lg" />

12Interactive

<Tooltip closeDelay={150}><TooltipContent interactive /></Tooltip>

13Close delay

<Tooltip closeDelay={400} />

14Icon button

<Button size="icon-sm" /> + <Tooltip trigger="hover" />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Tooltip, TooltipTrigger, TooltipContent } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

tooltip-example.tsx

import { Tooltip, TooltipTrigger, TooltipContent } from "kipui";

<Tooltip>
  <TooltipTrigger>
    <Button variant="ghost" size="icon"><TrashIcon /></Button>
  </TooltipTrigger>
  <TooltipContent side="top">Delete permanently</TooltipContent>
</Tooltip>

A tooltip is a label, not a place for content — anything a user must read to proceed belongs in the UI itself.
It opens on focus as well as hover, so keyboard users get the same label.
Set `interactive` on the content when it holds a link: without it the tooltip closes as the pointer travels towards it.

API reference

Transcribed from the component's own types. Props with no default are required.

Tooltip

Prop	Default	Description
childrenReactNode	required	Required. A TooltipTrigger and a TooltipContent.
trigger"hover" \| "click" \| "focus" \| "contextMenu"	"hover"	What opens it. Keyboard focus opens it regardless.
delayDurationnumber	100	Milliseconds before it opens.
closeDelaynumber	0	Milliseconds before it closes once the pointer leaves.
variant"default" \| "inverted" \| "primary" \| "destructive" \| "success" \| "warning" \| "info"	"default"	Colour of the bubble.
colorstring	required	Raw CSS colour for the bubble. Wins over `variant`.
showArrowboolean	true	Draws the arrow pointing at the trigger.
openboolean	required	Controlled open state.
defaultOpenboolean	required	Open before any interaction. Uncontrolled only.
onOpenChange(open: boolean) => void	required	Fires whenever it opens or closes.

TooltipTrigger

Prop	Default	Description
childrenReactNode	required	Required. The element the tooltip describes.
asChildboolean	false	Render the child directly instead of wrapping it.

TooltipContent

Prop	Default	Description
side"top" \| "bottom" \| "left" \| "right"	"top"	Preferred side; flips when there isn't room.
align"start" \| "center" \| "end"	"center"	Alignment along the chosen side.
sideOffsetnumber	8	Gap between the trigger and the bubble, in pixels.
size"sm" \| "md" \| "lg"	"md"	Padding and type scale.
radius"none" \| "sm" \| "md" \| "lg" \| "full"	"sm"	Corner radius preset.
interactiveboolean	false	Keeps it open while the pointer is over the bubble.