OverlayBrowse overlay components
Hover card
Rich preview on hover — perfect for user mentions and link previews.
Live preview
Reviewed by @maya-k
MK
Maya KrishnanSite Reliability · Atlas
42 reviewsOnline
Usage
Adapters:React stableVue stable
index.html
<span class="lm-hover-card">
<a href="/users/maya">@maya</a>
<div class="lm-hover-card-content">…</div>
</span>CSS classes (2)
| Class | Description |
|---|---|
lm-hover-card | Anchor wrapper |
lm-hover-card-content | Preview panel |
React props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
openDelay | number | 700 | — |
closeDelay | number | 300 | — |
Accessibility
- Show on hover AND focus.
- Don't make critical info hover-only — provide a click path.
Spotted something wrong? Edit this entry on GitHub.