Как заставить один элемент обновить свое положение относительно другого? ⇐ Html

[Anonymous]

Существует два элемента: кнопка и всплывающая подсказка. Кнопка находится в элементе с позицией: Sticky, а всплывающая подсказка отдельная и имеет позицию: Absolute (все эти условия изменить нельзя). При прокрутке документа всплывающая подсказка должна находиться рядом с кнопкой. Классическое решение — обрабатывать window.scroll, но в Safari очень некрасиво дергается подсказка
https://codepen.io/alexandroppolus/pen/VYeBLwm

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

function update() {
const tip = document.getElementById('tooltip');
const button = document.getElementById('button');

tip.style.top = (button.getBoundingClientRect().top + window.scrollY) + 'px';
// console.log('*** up', window.scrollY);
}

window.addEventListener('load', update);
window.addEventListener('scroll', update);

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

.header {
position: sticky;
top: 50px;
padding-left: 90px;
}

#tooltip {
position: absolute;
padding: 4px 8px;
border-radius: 7px;
background-color: #4499aa;
left: 160px;
}

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

tooltip


button

text
text 1
text 111
text 11111
text
text 1
text 111
text 11111
text
text 1
text 111
text 11111

Есть ли новые подходы к решению этой проблемы?

Подробнее здесь: https://stackoverflow.com/questions/798 ... to-another