hp-hover-card

Hover-/focus-triggered floating card. Like <hp-tooltip> but the body can contain interactive content. Open delay avoids flashes while skimming, close delay lets users move the pointer from trigger onto the card.

Examples

API

Intent

Changelog

@kira_chen

Kira Chen Level 42 hexcrafter Joined 2 years ago

<body> <hp-hover-card side="bottom"> <hp-link href="/users/kira">@kira_chen</hp-link> <div slot="content"> <strong>Kira Chen</strong> <span>Level 42 hexcrafter</span> </div> </hp-hover-card> </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`side`	`side`	`FloatingSide`	`"bottom"`	Preferred side relative to the trigger.
`align`	`align`	`FloatingAlign`	`"center"`	Alignment along the chosen side.
`offset`	`offset`	`number`	`8`	Pixel gap between trigger and card.
`openDelay`	`open-delay`	`number`	`400`	Open delay (ms) before showing. Default 400 — long enough to avoid flashes while skimming, short enough to feel responsive on intent.
`closeDelay`	`close-delay`	`number`	`300`	Close delay (ms) before hiding after pointer leaves both the trigger and the card. Default 300 — gives users time to move the pointer from trigger to card.

Events

Event	Type	Description
`hp-hover-card-open`	`CustomEvent`	When the card opens
`hp-hover-card-close`	`CustomEvent`	When the card closes

Slots

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

CSS Parts

Part	Description
`card`	The floating card element

When to use

Inline rich-content previews: user-card on a handle, version-info on a build hash, metadata on a chip. Card content can include links and buttons.

Use for tiny single-line labels — that's <hp-tooltip>. Use for click-triggered or critical-content panels — that's <hp-popover>.