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) |
closeDelay | 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 |
Accessibility
- Non-essential preview content
- Content stays visible when hovered
- Dismissible with Escape