Hover Card — Vanilla

Floating panel on hover with vanilla HTML. Open/close via JS.

Hover Card

Trigger needs data-hover-card-trigger; content uses hover-card__content and data-hover-card-content. Wire mouseenter/mouseleave with delay in JS.

Add this component

The command below includes <strong>HoverCard</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Structure (hover via JS)

Use Astro or Svelte component for full behavior.

HTML

html html 
<!-- Hover card: trigger with data-hover-card-trigger, content with data-hover-card-content; open on hover via JS -->
<div class="hover-card" data-hover-card id="my-hover-card">
  <span data-hover-card-trigger>Hover me</span>
  <div class="hover-card__content" role="dialog" aria-hidden="true" hidden data-hover-card-content>
    Content shown on hover.
  </div>
</div>

Other frameworks: Astro · Svelte · Vue · React