hp-tooltip

Lightweight tooltip — wraps a trigger and shows the slotted content on hover / focus. Auto-stamps aria-describedby on the trigger while open. Positioning is "side relative to trigger" only; for anchored / flipped popovers reach for the forthcoming hp-popover.

Examples

API

Intent

Changelog

top

tooltip above

right

tooltip right

bottom

tooltip below

left

tooltip left

<body> <hp-tooltip side="top"> <hp-button>info</hp-button> <span slot="content">More information</span> </hp-tooltip> </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`side`	`side`	`HpTooltipSide`	`"top"`	Tooltip side relative to the trigger.
`openDelay`	`open-delay`	`number`	`300`	Delay before showing on hover (ms). Default 300. Reduces flickering when the cursor passes over a trigger.
`closeDelay`	`close-delay`	`number`	`100`	Delay before hiding on mouseleave (ms). Default 100.

Slots

Slot	Description
`(default)`	Trigger element (first child)
`content`	Tooltip body

CSS Parts

Part	Description
`tooltip`	The tooltip body element

Accessibility

role="tooltip" on the content; aria-describedby linking the trigger to the tooltip's id while open. Escape dismisses. Open / close delays are configurable via open-delay / close-delay attributes (default 300 / 100 ms).

No per-component entries in CHANGELOG.md yet.

Install

Properties

Slots

CSS Parts

Accessibility

Contents