/* ========================================================================
css/tooltips.css — единые подсказки для всего сайта
До этого файла подсказок было три штуки и все с разным поведением:
• [data-tooltip]::after в css/style_admin.css — только для админа,
white-space: nowrap и, как псевдоэлемент, обрезался любым родителем
с overflow (например .table-responsive);
• .custom-tooltip в modules/structure/structure.css — только на
/structure, появлялась с transition 0.15s;
• нативный title="" — везде остальное, и он показывается с задержкой
порядка секунды, которую из CSS не убрать.
Здесь один плавающий блок, который js/tooltips.js кладёт прямо в
и позиционирует по координатам экрана. position: fixed — поэтому его
не режет ни overflow, ни z-index соседей.
Никаких transition и animation: подсказка обязана появляться сразу.
======================================================================== */
.site-tooltip {
position: fixed;
top: 0;
left: 0;
z-index: 2147483000; /* выше админ-панели (10020) и модалок Bootstrap */
max-width: 320px;
padding: 6px 10px;
border-radius: 5px;
background: #333;
color: #fff;
font-family: inherit;
font-size: 12px;
font-weight: normal;
line-height: 1.4;
text-align: left;
/* pre-line: переносы строк из подсказки сохраняются, лишние пробелы
схлопываются. Раньше structure.js подставлял для этого
в
innerHTML — теперь текст вставляется как textContent, и разметка
из названия раздела («Прайс») уже не может «ожить». */
white-space: pre-line;
overflow-wrap: break-word;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
pointer-events: none; /* подсказка не должна перехватывать мышь */
visibility: hidden;
}
.site-tooltip.is-visible {
visibility: visible;
}
/* Стрелка. Сторону задаёт класс (сверху элемента или снизу), а сдвиг по
горизонтали — переменная: подсказку прижимает к краю экрана, а стрелка
обязана остаться напротив элемента. */
.site-tooltip::after {
content: '';
position: absolute;
left: var(--tooltip-arrow-x, 50%);
width: 0;
height: 0;
margin-left: -5px;
border: 5px solid transparent;
}
.site-tooltip.is-above::after {
top: 100%;
border-top-color: #333;
}
.site-tooltip.is-below::after {
bottom: 100%;
border-bottom-color: #333;
}
/* Тёмная тема: фон подсказки светлее фона страницы, иначе она сливается */
body.theme-dark .site-tooltip {
background: #555;
color: #f0f0f0;
}
body.theme-dark .site-tooltip.is-above::after { border-top-color: #555; }
body.theme-dark .site-tooltip.is-below::after { border-bottom-color: #555; }
/* Курсор-подсказка у элементов, у которых нет своего действия: без него
пользователь не догадается навести. Кнопки и ссылки не трогаем — у них
свой курсор, и он важнее. */
span[data-tooltip],
abbr[data-tooltip],
th[data-tooltip],
td[data-tooltip] {
cursor: help;
}
@media print {
.site-tooltip { display: none !important; }
}