Nothing can cover it or clip it

<div class="demo demo--wide">
  <div class="card">
    <p class="demo-hint">A card with <code>overflow: hidden</code></p>
    <button class="demo-btn demo-btn--ghost" id="good">Top layer</button>
    <button class="demo-btn demo-btn--ghost" id="bad">The old way</button>
  </div>

  <div class="stack">z-index: 2147483647 lives here</div>

  <div class="demo-row">
    <div class="demo-seg" id="placement" role="group" aria-label="Placement">
      <button type="button" data-placement="top">top</button>
      <button type="button" data-placement="bottom" aria-pressed="true">bottom</button>
      <button type="button" data-placement="left">left</button>
      <button type="button" data-placement="right">right</button>
    </div>
  </div>

  <dl class="demo-kv" id="out"></dl>

  <p class="demo-hint">Escape closes it without moving the mouse. Move the pointer onto the panel and
    it stays. Both are <strong>WCAG 2.2 SC 1.4.13</strong>, and both have a test.</p>
</div>

import { createTooltip } from 'https://www.devix.pk/cdn/oss/popover@1.0.0/index.js';

const out = document.getElementById('out');
const good = document.getElementById('good');
const bad = document.getElementById('bad');

let placement = 'bottom';
let tip = createTooltip(good, { content: 'In the top layer, so nothing above it and nothing clips it.', placement });

// The old way, for comparison: a panel parked in the page, which the card's
// overflow clips and the z-index stack covers.
const old = document.createElement('div');
old.className = 'old-tip';
old.textContent = 'Parked in the page — clipped by the card, covered by the stack.';
old.hidden = true;
bad.after(old);

bad.addEventListener('pointerenter', () => { old.hidden = false; show(); });
bad.addEventListener('pointerleave', () => { old.hidden = true; show(); });

function show() {
    // Ask the browser what is actually on top at each panel's centre, rather
    // than claiming anything.
    const at = (element) => {
        if (element.hidden || !element.getBoundingClientRect().width) return '—';
        const box = element.getBoundingClientRect();
        const hit = document.elementFromPoint(box.left + box.width / 2, box.top + box.height / 2);

        return element.contains(hit) || element === hit ? 'visible' : 'covered or clipped';
    };

    out.innerHTML = `
    <div><dt>top layer</dt><dd>${at(tip.panel)}</dd></div>
    <div><dt>the old way</dt><dd>${at(old)}</dd></div>
    <div><dt>z-index we use</dt><dd>${getComputedStyle(tip.panel).zIndex}</dd></div>
    <div><dt>placement</dt><dd>${tip.panel.dataset.side ?? placement}</dd></div>`;
}

good.addEventListener('pointerenter', () => setTimeout(show, 200));
good.addEventListener('pointerleave', () => setTimeout(show, 200));

document.getElementById('placement').addEventListener('click', (event) => {
    const button = event.target.closest('button');
    if (!button) return;
    for (const other of event.currentTarget.querySelectorAll('button')) other.setAttribute('aria-pressed', String(other === button));
    placement = button.dataset.placement;
    tip.destroy();
    tip = createTooltip(good, { content: 'In the top layer, so nothing above it and nothing clips it.', placement });
    tip.show();
    show();
});

show();

@import url('https://www.devix.pk/cdn/oss/popover@1.0.0/popover.min.css');

.card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  height: 84px;
  padding: 12px;
  border: 1px solid var(--demo-line);
  border-radius: 12px;
  background: var(--demo-surface);
  overflow: hidden;
}

.stack {
  position: relative;
  z-index: 2147483647;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--demo-code);
  font: 11.5px var(--demo-mono);
  color: var(--demo-muted);
}

.old-tip {
  position: absolute;
  z-index: 10;
  max-width: 220px;
  margin-top: 30px;
  padding: 6px 9px;
  border-radius: 7px;
  background: #18181b;
  color: #fafafa;
  font-size: 12px;
}