hover-card

Rich tooltip showing on hover. Contains header, body, footer.

status: stable js: none support: baseline

Preview

<div class="hover-card"><a href="#">…</a><div class="hover-card-panel"><div class="hover-card-header">…</div>…</div></div>

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/hover-card.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add hover-card

Reveals on :hover/:focus-within — no JS; touch open needs JS; add aria-describedby

.hover-card .hover-card-panel .hover-card-header .hover-card-title .hover-card-description .hover-card-footer .hover-card-stat .hover-card-stat-value

base/tokens