на всю страницу (не по одному на элемент) — JS двигает его через position:fixed + inline top/left, тот же приём, что у components/spelling-badge.css (попап физически в , вне любых overflow:hidden контейнеров — .tile в Мозаике, .mcf-wrap и т.п.). Оформление — вариант «Мягкая карточка», выбранный из 5 вариантов: те же токены, что уже использует .spelling-badge__popup (components/spelling-badge.css) — белый фон, серая рамка var(--g3), та же тень и радиус, минимум нового визуального языка на сайте. */ #site-tooltip{ position: fixed; /* тоже валидный containing block для потомков с position:absolute — отдельный relative не нужен */ /* Выше самого высокого z-index на сайте (.ai-rewrite-overlay: 2000, components/ai-rewrite-choice.css) — иначе тултип, вызванный ИЗНУТРИ модалки (например, хелп у попапа "Варианты текста заявки"), рисуется ПОД её блюр-оверлеем и не виден. Тултип по смыслу всегда должен перекрывать любой другой UI, поэтому запас с большим отрывом. */ z-index: 3000; max-width: 22em; padding: .65em .9em; background: var(--c-surface); color: var(--c-text); /* var(--g1) — тот же текст, что у spelling-badge__popup */ border: 1px solid var(--c-border); /* var(--g3) */ border-radius: var(--radius-md); box-shadow: var(--shadow-popup); /* та же тень, что у spelling-badge__popup */ font-size: .85em; line-height: 1.45; font-weight: 400; font-style: normal; text-align: left; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; pointer-events: none; } #site-tooltip.is-open{ opacity: 1; visibility: visible; transform: translateY(0); } /* Стрелка — отдельный элемент (не ::before), т.к. JS позиционирует её по X отдельно от самого тултипа: если тултип упёрся в край экрана и сдвинулся (см. positionTooltip в tooltip.js), стрелка всё равно должна указывать точно на триггер, а не на центр сдвинутого тултипа. Рамка только на "внешних" двух гранях повёрнутого квадрата — тех, что формируют выступающий уголок наружу тултипа, иначе половина рамки рисовалась бы поверх основной карточки и выглядела двойной линией. */ #site-tooltip__arrow{ position: absolute; width: 11px; height: 11px; background: var(--c-surface); transform: rotate(45deg); } #site-tooltip.is-below #site-tooltip__arrow{ top: -6px; border-left: 1px solid var(--c-border); border-top: 1px solid var(--c-border); } #site-tooltip.is-above #site-tooltip__arrow{ bottom: -6px; border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } /* Курсор над элементом с подсказкой — тот же cursor:help, что был у нативного title. */ [data-tip]{ cursor: help; } /* Исключения: элементы, у которых title/data-tip — не единственный смысл (реально кликабельная кнопка, или статус-бейдж пингера) — курсор должен быть "как на кнопке" (pointer), а не help. Специфичность выше базового правила выше (тег+атрибут / класс+атрибут против одного атрибута), так что порядок подключения tooltip.css относительно других файлов больше не важен. Конкретный кейс: #scroll-top-btn (кнопка "Наверх") показывала cursor:help вместо pointer — эта же строка чинит любую другую кнопку/ ссылку с подсказкой сайт-вайд, не только эту одну. */ a[data-tip], button[data-tip]{ cursor: pointer; } .ping-lamp [data-tip]{ cursor: pointer; } /* Иконка-триггер тултипа — единая по всему сайту, ВСЕГДА одного диаметра. Раньше использовался .icon-1em (utilities.css, width/height:1em) — размер "1em" зависит от font-size ОКРУЖАЮЩЕГО текста (в h2 иконка выходила крупнее, чем у обычной подписи поля, приходилось руками подгонять font-size на каждом месте отдельно). rem всегда считается от корневого , поэтому диаметр не плавает по контексту — ставится как есть, без обёрток и подгонки. title вешается прямо на сам