<article>
  <h1>HTML Popover Anchoring Support</h1>
  <p>At the time of creating this popover anchoring doesn't work fully in current browsers.</p>

  <div class="help">
    <button id="trigger" popovertarget="popover" popovertargetaction="show">Help</button>
    <div id="popover" popover anchor="trigger">
      <p>Put this near the anchor button</p>
    </div>
  </div>

  <p><a href="https://developer.chrome.com/blog/introducing-popover-api">Learn more about popover</a></p>

  <h2>Tests</h2>
  <p>No feature-flags enabled</p>
  <ul>
    <li>❎ <strong>Arc 1.69 (Chromium Engine 131.0.6778.70) &amp; Chrome 130.0.6723.117 &amp; 131.0.6778.70</strong> place the popover at the top of the screen off towards the right edge of the viewport</li>
    <li>❎ <strong>Safari 18.1</strong> shows the popover half of the left of the screen (observing the translate directive)</li>
    <li>✅ <strong>Safari Technology Preview Release 207 (Safari 18.2, WebKit 20621.1.4.3) &amp; Firefox 131.0</strong> support CSS anchoring, but it's origin for the popover seems to be the top center (not top-left) [seems due to the text-align:center - which makes sense] of the popover element, meaning the translate moves it left-of-center</li>
    <li>⏸️ <strong>Orion 0.99.129-beta (WebKit 619.1.11.111.2)</strong> is similar to Safari, but it's seems like there's some margin on the popover placing it away from the button by about 2em</li>
  </ul>
</article>
body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  height: 100dvh;
  font-family: system-ui;
}

#popover {
  padding: 1em;
  background: rgba(20, 20, 20, 0.5);
  border-radius: 0.5em;
  backdrop-filter: blur(10px);
  color: #fff;

  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

article {
  max-width: 500px;
  text-align: center;
}

h2 {
  margin-bottom: -0.5em;
}

li {
  margin: 1em;
}

strong {
  color: #666;
  font-weight: normal;
  font-family: monospace;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.