Перейти к содержимому
← Все компонентыОбратная связь

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 — статика.

Кламп в границы экрана: триггер у правого края — панель не вылезает за вьюпорт, а прижимается внутрь (отступ 8px)