使用位置尝试选项时锚点位置不正确并且元素位于溢出中

Question

举以下例子：

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>

注意：此问题取决于屏幕尺寸。

在预览中，如果单击“1”，则工具提示将显示在右侧并向下流动。

如果您单击页面最右侧和底部的工具提示而不滚动（例如，如果使用默认预览尺寸，则为 14），工具提示将移至左侧并向上流动。

如果您向下滚动页面并单击 38（例如），即使下面有空间，工具提示也会向上流动。折叠下方的所有工具提示（需要滚动才能看到）都会向上流动，无论其位于页面上的位置如何。

我希望这个工具提示向下流动。这是一个错误、预期行为还是我误解了

position-try-options

的工作原理？

Answer 1

您想要在

inset: auto; margin: 0;

元素上设置

.content

。

用户代理将

inset: 0px; margin: auto;

添加到具有 popover 属性的元素，默认情况下将弹出窗口居中。