function showProgressiveTooltip(tooltipId, anchorId) {
  const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  const a = document.getElementById(anchorId);
  const t = document.getElementById(tooltipId);

  t.children[0].innerHTML = a.dataset.tooltip ;
  document.getElementById('progressive-tooltip').classList.add("display-flex");
  
  t.classList.remove('leaving');
  const tooltipRect = t.getBoundingClientRect();
  const anchorRect = a.getBoundingClientRect();
  
  if (anchorRect.top >= 100) {
    t.classList.add('tooltip-top');
    t.classList.remove('tooltip-bottom');
    t.style.top = anchorRect.top - tooltipRect.height + scrollPos - 6 + "px";
  } else {
    t.classList.remove('tooltip-top');
    t.classList.add('tooltip-bottom');
    t.style.top = anchorRect.bottom + scrollPos + 6 + "px";
  }
  const l = (anchorRect.right + anchorRect.left) / 2 - tooltipRect.width / 2;
  const left = Math.max(16, l);
  t.style.left = left + "px";
   
  const arrowLeft = l - left + tooltipRect.width / 2;
  document.documentElement.style.setProperty('--tooltip-arrow-left', `${arrowLeft}px`);
}

function hideProgressiveTooltip(tooltipId) {
  document.getElementById(tooltipId).classList.add("leaving");
}