Tooltip

Tooltips add lightweight supporting context to a trigger without permanently taking up layout space. They work best for short clarifications, not essential instructions.

Basic Usage

Pair a trigger with concise tooltip content for short explanatory copy.

Action Hints

Tooltips are especially useful on compact icon or utility actions where the visible label would otherwise be too noisy.

Placement

Choose the side that keeps the tooltip close to its trigger without covering nearby UI.

Keyboard Trigger

Tooltips should be available when a user reaches the trigger by keyboard focus.

API

Slots

Name	Description
trigger	Element that receives the tooltip
(default)	Tooltip content (falls back to content attribute)

Props

Name	Description
closeDelay	Type number Default 0
content	Type string
disabled	Type boolean Default false
for	Anchor element id — alternative to the trigger slot. Type string
openDelay	Type number Default 0
placement	Type PkPopupPlacement Default top
trigger	hover focus (default) or manual for programmatic open only. Type 'hover focus' | 'manual' Default hover focus

Methods

Name	Description
hide()	Closes the tooltip programmatically.
show()	Opens the tooltip programmatically.

Events

Name	Description
@pk-open-change	—

CSS Parts

Name	Description	CSS selector
content	Tooltip body	::part(content)

Dependencies

This component registers the following elements when it loads.

Name	Description
pk-popup	—