10. Тултипы
Контекстные подсказки при наведении. Появляются поверх контента через position: fixed, не обрезаются родителем. Анимация: 120ms ease-out, fade + translateY.
Варианты
Простой
С заголовком
С описанием
Анимация и правила
--tooltip-duration120msДлительность появления--tooltip-easingcubic-bezier(0, 0, 0.2, 1)Ease-out — быстрый вход, плавный финал--tooltip-offset-y4pxСмещение при появлении (translateY)--tooltip-scale0.97 → 1Лёгкое масштабирование·
Не обрезается родителем
Тултип рендерится через fixed, всегда поверх контента
·
Появляется быстро
120ms — достаточно для плавности без задержки
·
pointer-events: none
Тултип не мешает взаимодействию с соседними элементами
·
Исчезает мгновенно
При уходе курсора — убирается без анимации (unmount)
·
Минимальная ширина 160px
Контент не переносится слишком узко
·
z-index: 50
Всегда поверх контента, но под модалами (z-100+)