Статья на Хабре завершает серию про «идеально размещённые тултипы» и показывает, как с помощью современного CSS и Anchor Positioning API делать тултипы, которые «следуют» за якорём, но уже не по сторонам, а по углам. Автор работает с позициями вида position-area: top left и их фолбэками через position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline, что позволяет обходиться без жёстко заданных координат и сохранять корректную работу с min-width и другими размерами. Пока полный набор возможностей поддерживают только Chrome и Edge.

Ключевой трюк: псевдоэлемент тултипа с position: fixed и position-anchor накладывается на якорь, его размер задаётся через anchor-size() с учётом отступа и размера «хвостика», а далее из него «высекается» фигура с четырьмя хвостами с помощью clip-path. Затем один вызов clip-path: inset(0) margin-box на самом тултипе обрезает лишние хвосты, оставляя только нужный в видимой области. Приём масштабируется на другие паттерны тултипов, автор даёт несколько демо и предлагает читателю попробовать переделать прошлые примеры.

В финале подчёркивается, что Anchor Positioning API пока находится на уровне Level 1, но в планах Level 2 с возможностью запрашивать fallback-позиции и привязывать к ним кастомный CSS. Это должно сделать код менее «хаковым» и открыть дорогу более декларативным схемам условного позиционирования, где элементы на странице явно «связаны» друг с другом и динамически подстраиваются под контекст без JavaScript.