Hover Card
The Hover Card is a native web component (pura-hover-card) that shows a non-modal card with rich content when the user hovers over or focuses the trigger. It uses the native Popover API (top layer, light dismiss, and ESC included) with CSS anchor positioning, plus configurable open and close delays. Useful for profile previews, definitions, links, and any contextual detail that should not interrupt the user's flow.
Preview
<pura-hover-card placement="bottom">
<a slot="trigger" href="#" style="color: var(--pura-accent, #4f46e5); text-decoration: underline;">@andre</a>
<div style="display: flex; gap: 12px; align-items: flex-start;">
<img src="https://i.pravatar.cc/48?img=12" alt="André" width="48" height="48" style="border-radius: 50%;" />
<div>
<strong>André Ahlert</strong>
<p style="margin: 4px 0 8px;">Founder of AEX Partners. Building tools for the native web.</p>
<small style="color: var(--pura-muted, #6b7280);">Joined March 2021</small>
</div>
</div>
</pura-hover-card>
<!-- Attributes: open, placement (bottom|top|left|right), open-delay, close-delay -->
<!-- Events: open, close — Methods: show(), hide() -->Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls/reflects the visibility of the card; present when open. |
placement | "bottom" | "top" | "left" | "right" | bottom | Position of the card relative to the trigger. |
open-delay | number (ms) | 150 | Delay in milliseconds before opening when user intent is detected. |
close-delay | number (ms) | 150 | Delay in milliseconds before closing when leaving the trigger and the card. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/hover-card.js"></script>import "./pura/lib/hover-card.js";