Interest Card (hover preview)
The 'hover a link, see a rich preview card' pattern (GitHub's issue/PR hover cards, X/Twitter's profile hover cards) built with zero JavaScript, using the new Interest Invoker API: the `interestfor` attribute on a link points at a `popover="hint"` target, and the browser itself fires 'interest' on real mouse hover OR keyboard focus — one attribute replaces the usual mouseenter/mouseleave/focusin/focusout JS listener stack plus manual delay timers plus manual close-on-blur logic every hand-rolled hover-card implementation needs. Real, current (2025/2026), sourced via WebSearch, cross-checked across multiple independent sources (the Open UI 'Interest Invokers' explainer, MDN's 'Using interest invokers' guide and its `interest-delay` property reference, CSS-Tricks' 'A First Look at the Interest Invoker API', and caniuse's own 'wf-interest-invokers' tracking) all agreeing: `interestfor` plus the `:interest-source`/`:interest-target` pseudo-classes shipped Chrome/Edge 142 (the CSS Working Group accepted the proposal in July 2025) — Firefox (through 154) and Safari (through 26.5) have NOT shipped it, so this is explicitly Chromium-only, not Baseline, same honesty policy as every prior entry here. The `interest-delay` shorthand (default 0.5s show / 0.5s hide on both `interest-delay-start`/`interest-delay-end`) is tuned down here, and — a real accessibility fix sourced from the same research, not this catalog's own guess — `interest-delay-end: 0s` is set on `:focus-visible` specifically, so a keyboard user tabbing away doesn't have to wait out a hide delay meant for an accidental mouse flick. **Two honest gaps, stated plainly rather than glossed over:** first, utilitybend's 'HTML popovers shown on interest should be accessible on mobile devices' (cross-checked, same finding independently confirmed) notes hover/focus-based interest has no direct touch equivalent, so touch-only visitors never see the preview card at all today — they still get the underlying link, which works normally, just without the enhancement; second, this sandbox's own pinned Chromium (141.0.7390.37) predates Chrome 142, so this run's own Playwright verification could exercise the markup, CSS, and typecheck but could NOT confirm the actual hover-triggered open/close firing in this environment — the same category of sandbox-version gap already logged honestly in this catalog's 'Customizable Select' entry, flagged here as unconfirmed rather than asserted working. Degrades with zero risk either way: a non-supporting browser just renders a plain, fully-functional link with an inert `popover="hint"` target that never opens — never broken, never empty. No WebGL, no scroll-jacking. (Vanilla example: live iframe preview + HTML/CSS tabs — hover or Tab-focus the underlined link.)
<div class="icd-wrap">
<a href="#" class="icd-link" interestfor="icd-card">Apex Flow Labs ⓘ</a>
<div id="icd-card" class="icd-card" popover="hint">
<strong>Apex Flow Labs</strong>
<p>One source. Every brand. AI companions, websites, courses, and gear — all from one ecosystem.</p>
</div>
</div>How it works
Interest Card (hover preview) is a hand-built card component in plain HTML and CSS — no React, no Tailwind, no framework at all. Paste it into any site as-is and it stays performant on real devices. It's free — copy the code above and ship it.
← Browse all components