Popover

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<button class="tui-key tui-popover__trigger" popovertarget="tariff">Tariff</button>

<div class="tui-popover" id="tariff" popover role="dialog" aria-labelledby="tariff-t">
  <p class="tui-popover__title" id="tariff-t">Flux, three rates</p>
  <p>Cheapest 00:00–02:00, dearest 16:00–19:00.</p>
  <div class="tui-popover__actions">
    <button class="tui-key tui-key--flat tui-key--sm" popovertarget="tariff" popovertargetaction="hide">Close</button>
    <button class="tui-key tui-key--primary tui-key--sm">Change tariff</button>
  </div>
</div>

import '/kit/kit.mjs';   // places every .tui-popover as it opens

// Prefer a side: data-side="top" on the card; data-align="start" | "end".
// For your own floating parts:
import { placePopover } from '/kit/kit.mjs';
placePopover(card, key, { side: 'bottom', align: 'center', gap: 14 });

Needs kit.css and kit.mjs. How to install the kit.

• The native popover with popovertarget: the key is announced as expanded or collapsed, and Tab goes from the key straight into the card.
• Not modal: focus is not trapped, and the rest of the page keeps working. For a decision that must be made now, use a dialog.
• Escape closes it and focus returns to the key; a click outside closes it too.
• The leader is drawn with ::before and ::after: nothing to announce.

Opening and closing are the browser’s; popover.mjs answers the toggle event, measures the key and the card, and places the card below it (or above, or beside), sliding it to stay inside the window. It writes --tui-leader, and the card’s ::before draws a hairline across the 14px gap to that point while its ::after puts a dot on the key’s edge: a callout from a manual. The arithmetic is a pure function with its own tests. The card hangs down 5px in 160ms.