Hover Card

Rich hover preview card.

Usage

<w-hover-card>
  <w-slot trigger><w-link href="/user/123">@username</w-link></w-slot>
  <w-slot body>
    <div>
      <img src="avatar.jpg" alt="" />
      <h4>User Name</h4>
      <p>Bio information...</p>
    </div>
  </w-slot>
</w-hover-card>

Props

Prop	Type	Default	Description
open	boolean	false	Whether card is visible
placement	string	"bottom"	Card position
delay	number	500	Show delay (ms)
close-delay	number	300	Hide delay (ms)

Slots

Slot	Element	Description
trigger	Any	Element to hover
content	Any	Card content

Events

Event	Description
show	Card shown
hide	Card hidden

Styling

The card is teleported to the portal when shown. The host is display: contents, so it doesn't disturb inline layout around the trigger. autoPosition handles placement.

/* The card body — write your selector against the slot directly */
w-hover-card w-slot[body] > *,
[data-portal-owner^="w-hover-card"] {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 280px;
}

/* Trigger active state */
w-hover-card w-slot[trigger] > *[aria-expanded="true"] {
  text-decoration: underline;
}

Selector	Targets
w-hover-card[open]	Host while open
w-hover-card w-slot[trigger] > *[aria-expanded="true"]	Active trigger
[data-portal-owner^="w-hover-card"]	The teleported body

Accessibility

• Non-essential preview content
• Content stays visible when hovered
• Dismissible with Escape