Hover Card

Rich preview surfacing on hover or focus of a trigger, with open intent delay and flip-on-overflow placement.

INSTALL

1pnpm dlx @sayagodev/mo add hover-card

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/hover-card.css";2import "@sayagodev/mo/js/hover-card.js";

EXAMPLES

Demo

1<mo-hovercard>2  <button type="button" class="link">@nextjs</button>3  <div popover id="ex-hovercard">4    <strong>@nextjs</strong>5    <p>The React Framework – created and maintained by @vercel.</p>6    <p><small>Joined December 2021</small></p>7  </div>8</mo-hovercard>9

Sides

1<div class="hstack flex-wrap">2  <mo-hovercard>3    <button type="button" class="outline">bottom</button>4    <div popover id="ex-hovercard-bottom">5      <strong>Hover Card</strong>6      <p>This hover card appears below the trigger — the default side.</p>7    </div>8  </mo-hovercard>9  <mo-hovercard>10    <button type="button" class="outline">top</button>11    <div popover id="ex-hovercard-top" data-side="top">12      <strong>Hover Card</strong>13      <p>This hover card appears above the trigger.</p>14    </div>15  </mo-hovercard>16  <mo-hovercard>17    <button type="button" class="outline">left</button>18    <div popover id="ex-hovercard-left" data-side="left">19      <strong>Hover Card</strong>20      <p>This appears to the left of the trigger.</p>21    </div>22  </mo-hovercard>23  <mo-hovercard>24    <button type="button" class="outline">right</button>25    <div popover id="ex-hovercard-right" data-side="right">26      <strong>Hover Card</strong>27      <p>This appears to the right of the trigger.</p>28    </div>29  </mo-hovercard>30</div>31

USAGE

1<mo-hovercard>2  <button type="button" class="link">@nextjs</button>3  <div popover id="hc1">4    <strong>@nextjs</strong>5    <p>The React Framework.</p>6  </div>7</mo-hovercard>

API

NAMEKINDDESCRIPTION

<mo-hovercard>elementHover lifecycle, placement, aria-expanded sync

> :not([popover])elementTrigger; the card opens on hover + focus

> [popover]elementCard surface, w-80; data-side="top" prefers above (sides flip on overflow)

--mo-hover-card-*tokenWidth and radius hooks

FILES

src/css/hover-card.csssrc/js/hover-card.js

Install:mo add hover-card

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--foreground--popover--popover-foreground--radius

Component hooks

--mo-hover-card-radius--mo-hover-card-width

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.