Как использовать позицию привязки CSS для прикрепления детей к родителю ⇐ CSS

[Anonymous]

У меня есть следующая структура HTML:

Код: Выделить всё

Button content
Tooltip

Я хочу разместить .tooltip над кнопкой, используя позицию привязки, как показано ниже:

Код: Выделить всё

button {
anchor-scope: --button;
anchor-name: --button;
}

.tooltip {
position: absolute;
position-anchor: --button;
position-area: top;
}

Однако, поскольку .tooltip находится внутри , он, похоже, не распознает свойства привязки. Я не смог найти никаких ограничений по этому поводу в документации, поэтому у меня вопрос: как обойти это ограничение и использовать родительский элемент (кнопку) в качестве привязки для всплывающей подсказки?
Для контексте, вот рабочий фрагмент:

Код: Выделить всё

body{
padding: 3em;
}

button {
position: relative;
anchor-scope:--button;
anchor-name:--button;
width: 10em;
height: 3em;
border-radius: .4em;

&::after{
display:block;
position: absolute;
content:attr(aria-label);
background: black;
color:white;
margin-bottom: 5px;
white-space: pre;
padding: 0.3em;
border-radius: .3em;
}
}

#button-1::after{
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
#button-2:after{
position-anchor: --button;
position-area: top;
}

Код: Выделить всё

Button



Button

Подробнее здесь: https://stackoverflow.com/questions/793 ... his-parent