` markup lifts out of the surrounding `
` before the browser parses it — this keeps the running paragraph well-formed and the Alpine `$refs.panel` lookup intact across the teleport boundary. The landmark is created by WireKit's own JavaScript, so a teleported panel stays inside a region an assistive technology can announce.
:::
## Placement
Control where the card appears relative to the trigger:
:::preview{title="Top placement"}
Hover me (top)
This card appears above the trigger.
:::
Available placements: `'top'`, `'bottom'` (default), `'left'`, `'right'`, and their `-start`/`-end` variants (e.g. `'bottom-start'`). The card automatically flips if there isn't enough space, powered by [Floating UI](https://floating-ui.com/).
## Custom Delays
Adjust show/hide delays for different use cases:
```blade
{{-- Quick preview: short delay --}}
Quick preview
Fast-appearing content.
{{-- Slow reveal: longer delay --}}
Slow reveal
Content that takes longer to appear.
```
## Hover Card vs Tooltip
| Feature | Tooltip | Hover Card |
| --- | --- | --- |
| Content | Plain text | Rich HTML (images, buttons, links) |
| Interaction | Read-only | Can contain interactive elements |
| ARIA role | `tooltip` | `dialog` |
| Keyboard | Focus shows, no interaction inside | Focus shows, can Tab into content |
| Use case | Short labels, abbreviations | User profiles, link previews |
## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placement` | string | `'bottom'` | Floating UI placement (`'top'`, `'bottom'`, `'left'`, `'right'`, + `-start`/`-end`) |
| `offset` | int | `8` | Distance from trigger in pixels |
| `delayShow` | int | `300` | Milliseconds before showing on hover |
| `delayHide` | int | `200` | Milliseconds before hiding on leave |
| `scope` | string\|null | `null` | Scoped personalization key |
### Slots
| Slot | Purpose |
| --- | --- |
| `trigger` | The element that activates the hover card |
| default | Rich content inside the card panel |
## Accessibility
- Trigger has `aria-haspopup="dialog"` — announces that activation opens a dialog
- Trigger has `aria-expanded` — toggles between `"true"` and `"false"`
- Panel uses `role="dialog"` — screen readers announce content as dialog
- **Keyboard:** focus on trigger opens card; Escape closes it
- **Mouse:** hovering trigger or panel keeps card open; moving away starts hide delay
- Card stays open when hovering between trigger and panel (bridge delay prevents flicker)
- SPA-safe: cleans up on Livewire page navigation
## Keyboard Interaction
| Key | Action |
|-----|--------|
| `Tab` (focusing the trigger) | Open the hover card |
| `Tab` (away from trigger) | Close the hover card |
| `Escape` | Close the hover card while the trigger keeps focus |
## Pitfalls
- **Don't put critical info in a hover-card.** Hover has no keyboard or touch equivalent — the component reveals on focus too, but discoverability for non-mouse users is poor. For must-read content use `` with an explicit trigger.
- **Don't auto-open on page load.** Hover-cards are user-triggered.
## Design Tokens
| Element | Token |
| --- | --- |
| Panel background | `--color-wk-bg-elevated` |
| Panel border | `--color-wk-border` / `--border-wk-width` |
| Panel radius | `--radius-wk-lg` |
| Panel shadow | `--shadow-wk-lg` |
| Panel padding | `--padding-wk-x-md` |
| Text color | `--color-wk-text` |
| Text size | `--text-wk-md` |
| Font family | `--font-wk-sans` |
| Transition | `--transition-wk-duration` |
## Customization
Override defaults in `config/wirekit.php`:
```php
'components' => [
'hover-card' => [],
],
```
## Further Reading
- [Floating UI documentation](https://floating-ui.com/)
- [WAI-ARIA: Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
- [MDN: `aria-haspopup`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)