Hover card

kai-hover-card

Shows a profile or a preview behind a trigger, holding real markup rather than plain text.

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

Preview

When to use

When the preview is content: an avatar that opens a profile, a mention that shows who someone is. For a plain-text hint on an icon button, use Tooltip instead.

Usage

Put the trigger in the default slot 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 in without closing it. It opens on hover and on keyboard focus.

openDelay (default 0) and closeDelay (default 300 ms) tune the timing, and placement steers the panel, which flips to stay in view.

<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

Code

A badge that explains itself

Code

A link preview

Slower to open, so it doesn’t fire on every pass.

Code

Slots

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

Slot	Mode	Purpose
(default)	inject	The TRIGGER the card hovers off. The card body is the `card` slot.
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
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
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 the open state: `el.open = true` or the bare `open` attribute. Listen for `kai-open-change`.
defaultOpen	boolean	—	Initial open state on mount (uncontrolled seed).
disabled	boolean	—	Suppress the hover behavior entirely without unmounting.

Methods

Method	Signature	Notes
show	(): void	Open it programmatically (no-op while disabled).
hide	(): void	Close it programmatically.
toggle	(): void	Flip the open state (closes while disabled).

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