ds
Components
Popover and hover card

Popover and hover card

Floating panels on the native popover attribute.

Popover

Delete run #4812?

Logs and task output for this run are removed. The tables it wrote stay.

Code

<button class="btn sm" popovertarget="pop-share" style="anchor-name: --pop-share"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>Share</button>
<div class="pop" id="pop-share" popover style="position-anchor: --pop-share">
  <h4>Share this dashboard</h4>
  <p>Anyone in <b>acme</b> with the link can view it. Editing needs the Editor role.</p>
  <div class="inp-group mono"><input class="inp" value="https://app.acme.dev/d/7f3e" readonly aria-label="Link" /><button class="btn" data-copy="https://app.acme.dev/d/7f3e"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg><span>Copy</span></button></div>
  <label class="chk"><input class="switch" type="checkbox" />Public link, no sign-in</label>
</div>
<button class="btn sm" popovertarget="pop-confirm" style="anchor-name: --pop-confirm"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>Delete run</button>
<div class="pop" id="pop-confirm" popover style="position-anchor: --pop-confirm">
  <h4>Delete run #4812?</h4>
  <p>Logs and task output for this run are removed. The tables it wrote stay.</p>
  <div class="pop-foot"><button class="btn sm ghost" popovertarget="pop-confirm" popovertargetaction="hide">Cancel</button><button class="btn sm danger">Delete</button></div>
</div>

A panel that floats next to the button that opened it, for small tasks that should not take over the page: share a link, confirm one action, set two fields. It uses the native popover attribute, so popovertarget opens it, Escape and a click outside close it, and it sits on the top layer above everything else, all without script.

Where the browser supports anchor positioning, the panel opens under its button and flips when there is no room. Set anchor-name on the button and position-anchor on the panel. Older browsers open it in the centre of the screen, which still works. There is no arrow: after a flip, an arrow would point the wrong way.

Hover card

Last deploy by

Priya Kulkarni

PKPriya KulkarniData platform · Bengaluru

Local time: 14:32 IST
On call: Until Fri 09:00

orders-api

Service

orders-api

Healthy · 6 of 6 pods

Version: v2.14.0
p99: 212 ms
Owner: data-platform

, 2 hours ago.

Code

<div class="hc-line">Last deploy by <div class="hc"><a href="#">Priya Kulkarni</a>
  <div class="pop">
    <span class="who"><span class="avatar lg t-teal">PK</span><span><b>Priya Kulkarni</b><small>Data platform · Bengaluru</small></span></span>
    <dl class="dlist sm"><div><dt>Local time</dt><dd>14:32 IST</dd></div><div><dt>On call</dt><dd>Until Fri 09:00</dd></div></dl>
  </div>
</div> on <div class="hc"><a href="#" class="mono">orders-api</a>
  <div class="pop">
    <span class="label">Service</span>
    <h4>orders-api</h4>
    <span class="status"><span class="status-dot"></span>Healthy · 6 of 6 pods</span>
    <dl class="dlist sm"><div><dt>Version</dt><dd class="mono">v2.14.0</dd></div><div><dt>p99</dt><dd class="mono">212 ms</dd></div><div><dt>Owner</dt><dd>data-platform</dd></div></dl>
  </div>
</div>, 2 hours ago.</div>

A preview of a person or a service on hover or focus, after the same short delay as the tooltip. It is CSS only: the card is a child of .hc and shows on :hover and :focus-within. Put nothing in it that people must reach; the link itself goes to the full page.

API

Class	On	What it does
`.pop`	div[popover]	The panel. h4, p, fields, an hr, a .pop-foot. 18rem wide.
`.pop-foot`	div	Buttons at the bottom, on the page background.
`.sm`	.pop	Tight padding and auto width, for a single line.
`.end`	.pop[popover]	Aligns to the right edge of the trigger.
`anchor-name / position-anchor`	style	Ties the panel to its button.
`.hc`	span	Hover card wrapper: a link, then a .pop. `.end` aligns it right.

One task per popover.
A visible close or cancel when there are inputs.
Hover cards that only repeat what the linked page has.

Don't

Forms longer than three fields. Use a drawer or a dialog.
Popovers that open on hover and hold buttons.
Nesting popovers.

Accessibility

The browser handles Escape, light dismiss and returning focus to the button for [popover]. A popover is not modal: Tab moves on to the rest of the page.
Give the panel a heading. If it needs to trap focus, it is a dialog.
Hover cards are invisible to touch and to many screen reader users, so they can only ever be extra.