csspopover-apianchor-positioning-api

Anchor position incorrect when using position-try-options and element is in the overflow

Take the following example:

const container = document.getElementById('container')

let html = ''

for (let i = 1; i < 149; i++) {
  html += `<div class="tooltip">
              <button class="trigger"
                popovertarget="tooltip-${i}"
                style="anchor-name: --tooltip-${i}">${i}</button>

              <div popover id="tooltip-${i}" class="content" style="position-anchor: --tooltip-${i}">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
               A adipisci aliquam asperiores at aut beatae corporis, 
               cupiditate ea eaque error hic maxime.
              </div>
            </div>`
}

container.innerHTML = html
#container {
  background: #484848;
  color: #FFF;
  padding: 50px;
  display: flex;
  gap: 80px;
  flex-wrap: wrap;
  justify-content: start;
  align-content: flex-start;
}

.trigger {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 100%;
  display: flex;
  color: #000;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  &:has(+: popover-open) {
    background-color: #000;
    color: #FFF;
  }
}

.content {
  position: absolute;
  padding: 15px;
  font-size: 14px;
  width: 220px;
  margin: 0;
  border-radius: 12px;
  inset-area: right span-bottom;
  position-try-options: flip-block, flip-inline, flip-block flip-inline;
}
<div id="container"></div>

Note: This issue is dependant on screen size.

In the preview, if you click on '1' then the tooltip shows to the right and flows down. enter image description here

If you click on the tooltip to the far right and bottom of the page without scrolling (e.g 14 if using the default preview size) the tooltip goes to the left and flows up. enter image description here

If you then scroll the page down and click on 38 for example, the tooltip flows upwards even though there is room below. All tooltips below the fold (requires scrolling to see) flow upwards regardless of where it is positioned on the page. enter image description here

I would expect this tooltip to flow downwards. Is this a bug, intended behaviour, or have I misunderstood how position-try-options works?

Solution

  • You want to set inset: auto; margin: 0; on the .content element.

    The user agent adds inset: 0px; margin: auto; to elements with the popover attribute, which centers popovers by default.