Динамическое позиционирование тултипа с использованием Anchor Positioning

С помощью anchor positioning можно «привязать» один элемент к другому и при этом гарантировать, что он останется видимым на экране, даже если привязанный элемент смещается. Теперь представим, что этот элемент — тултип. А что насчет его «хвостика»? Его тоже можно настроить так, чтобы он всегда указывал на якорь.

#anchor {
  position: absolute;
  anchor-name: --anchor;
}

#tooltip {
  --d: 1em;   /* расстояние между якорем и тултипом */
  --s: 1.2em; /* размер хвостика */
  
  position: absolute; 
  position-anchor: --anchor;
  /* размещаем тултип сверху */
  position-area: top;
  bottom: var(--d);
  margin-top: var(--d); /* этот margin наследуется псевдоэлементом, здесь он ничего не делает */
  /* если сверху тултип не помещается — переключаемся вниз (margin перевернётся автоматически) */
  position-try-fallbacks: flip-block; 
  anchor-name: --tooltip;
}

/* хвостик тултипа */
#tooltip:before {
  content: "";
  position: fixed;
  z-index: -1;
  width: var(--s);
  background: inherit;
  /* вертикальное положение относительно тултипа */
  top:    calc(anchor(--tooltip top) - var(--d));
  bottom: calc(anchor(--tooltip bottom) - var(--d));
  /* горизонтальное положение относительно якоря */
  left: calc(anchor(--anchor center) - var(--s)/2);
  margin: inherit; /* делает магию — скрывает верх или низ формы в зависимости от положения */
  /* форма стрелки */
  clip-path: polygon(
    50% .2em,
    100% var(--d),
    100% calc(100% - var(--d)),
    50% calc(100% - .2em),
    0 calc(100% - var(--d)),
    0 var(--d)
  );
}

https://css-tip.com/tooltip-anchor/

@WebDev_Plus