Hover card

kai-hover-card

Reveals a rich floating panel when its trigger is hovered or focused — a user card behind an avatar, a preview behind a link. The trigger is the default content; the panel goes in slot=“card”.

• Shadow DOM
• Hover + focus
• Auto-flips placement
• Hover bridge

Preview

When to use

Reach for a hover card when the preview is content — an avatar that opens a profile, a mention that shows who someone is, a link that previews the page behind it. It carries markup, so it can hold its own layout, images, and links. For a plain-text hint on an icon button, use Tooltip instead.

Usage

Put the trigger as the default light-DOM content and the panel in slot="card". The card is portaled and positioned inside the shadow root, with a transparent bridge so the pointer can travel from the trigger into the card without it closing. It opens on hover and on keyboard focus.

Tune the timing with openDelay (default 0) and closeDelay (default 300 ms), and steer the panel with placement — it flips to stay in view regardless.

<kai-hover-card placement="top">
  <a href="#">@acme</a>
  <div slot="card">
    <strong>Acme Corp</strong>
    <p>Workspace · 24 members</p>
  </div>
</kai-hover-card>

Examples

A profile behind an avatar

The default slot can be any trigger — here a <kai-avatar> opens a profile card.

Code

A badge that explains itself

Wrap a <kai-badge> to expand a short label into the full story.

Code

A link preview

Slower to open so it doesn’t fire on every pass — openDelay waits for intent.

Code

Slots

The trigger is the default slot; the card is the one named seam:

Slot	Mode	Purpose
card	inject	The rich content shown in the floating hover card.

<kai-hover-card>
  <kai-avatar src="/jordan.jpg" alt="Jordan Lee"></kai-avatar>
  <div slot="card">
    <strong>Jordan Lee</strong>
    <p>Staff engineer · Platform</p>
  </div>
</kai-hover-card>

Props

Property	Type	Default	Notes
openDelay	number	—	Delay (ms) before the card opens on hover. Defaults to 0 (focus opens it immediately too).
closeDelay	number	—	Delay (ms) before it closes after the pointer leaves. Defaults to 300.
placement	string	—	Preferred placement: `'top' | 'bottom' | 'left' | 'right'` (+ optional `-start`/`-end`). Defaults to `'bottom'`; flips to stay in view.
open	boolean	—	Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute, the element still self-manages on hover). Set `el.open = true`, or `<kai-hover-card open>`; listen for `kai-open-change`.
defaultOpen	boolean	—	Initial open state on mount (uncontrolled seed).
disabled	boolean	—	Suppress the hover behavior entirely without unmounting.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

HoverCardRootHoverCardTriggerHoverCardContent

---

Need a hand? Report a bug Ask for help