Tooltip

Uses the Popover API (popover="manual") for top-layer stacking, positioned with CSS anchor positioning where it's supported, falling back to a computed position otherwise. Hover and focus show and hide it; interestfor is declared on the trigger too, as a forward-looking, purely additive enhancement for the emerging native hover-intent API.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Unstyled

Same component — Kernel look stripped. See Platforms.

content

placement

align

offset (px)

openDelay (ms)

closeDelay (ms)

arrow

trigger label

Usage

<Tooltip content="Copies the current URL" render={<Button variant="secondary">Share</Button>} />

<kernel-tooltip>
  <button slot="trigger" type="button">Share</button>
  Copies the current URL
</kernel-tooltip>

Props

Props for Tooltip.
Prop	Type	Default
`content`	ReactNode (required)	—
`render`	the trigger element (required)	—
`renderContent`	RenderProp — replace the popup	—
`className`	string \| (state) => string	—
`placement`	"top" \| "bottom" \| "left" \| "right"	"top"
`align`	"start" \| "center" \| "end"	"center"
`offset`	number (px)	8
`openDelay`	number (ms)	0
`closeDelay`	number (ms)	0
`arrow`	boolean	false
`renderArrow`	RenderProp	—

Composition

The popup exposes data-slot="tooltip-content",data-placement, data-align, data-open,data-opening, and data-closing. SetcloseDelay so the pointer can travel from the trigger into rich content without the tooltip closing underneath it.