Hover card
Preview panel on hover or keyboard focus. CSS only.
@noordNoord, a venture studio in Alkmaar. Ten portfolio companies, one design system.
Install
npx raster add hover-card
Markup
<span class="rs-hover-card"><span tabindex="0">@noord</span><span class="rs-hover-card-panel">Noord, a venture studio in Alkmaar. Ten portfolio companies, one design system.</span></span>
React
import { HoverCard } from "@/components/raster/hover-card";
<HoverCard trigger={<a className="rs-link" href="/noord">@noord</a>}>
Noord, a venture studio in Alkmaar.
</HoverCard>Classes
.rs-hover-card.rs-hover-card-panel