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.
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 the tooltip goes to the left and flows up.
If you then scroll the page down and click on 38 for example, the tooltip flow updwards even though there is room below.
I would expect this tooltip to flow downwards. Is this a bug, intended behaviour, or have I misunderstood how position-try-options works?