CoreTooltip
Примеры использования и документация.
Короткая подсказка к элементу интерфейса: расшифровка сокращения, пояснение назначения кнопки или поля. Пользователь получает ответ на вопрос, не уходя со страницы и не открывая справку. Берите для одного-двух предложений; для длинных объяснений или интерактивного контента используйте поповер.
Подсказка приходит всеми путями: наведение курсора и клавиатурный фокус (focusin/focusout всплывают от фокусируемого содержимого триггера — иконичные кнопки с тултипом доступны и через Tab), Esc — клавиатурная альтернатива уводу курсора. Панель не перехватывает курсор и клики (pointer-events: none) — она не мешает тому, над чем всплыла; openDelay (300мс по умолчанию) не даёт ей мелькать при проведении курсора мимо.
Позиция — шесть вариантов placement с зазором 6px до триггера; панель сама прижимается в границы вьюпорта с отступом 8px (сдвиг через свойство translate — композицию с placement-трансформом не ломает). Текст — проп text или слот #content с форматированием. Поверхность инвертирована — тёмный фон со светлым текстом, читается в обеих темах (перекрывается --tooltip-bg/-fg); flow — фирменный перелив рамки (--tooltip-flow-a/-b, полная замена — --tooltip-flow-image); при prefers-reduced-motion — статика.