Генератор tooltip CSS

Генератор tooltip CSS: для чего нужен

Tooltip — это короткая подсказка, которая появляется при наведении мыши на кнопку или значок. Этот генератор делает подсказку только на CSS, в четырёх положениях, с необязательной стрелкой, цветами, скруглениями и задержкой, чтобы она не мигала, когда мышь просто проходит поверх.

Код доступен: подсказка связана с кнопкой через aria-describedby, имеет role=tooltip, появляется и когда элемент получает фокус с клавиатуры или касанием и учитывает тех, кто предпочитает меньше движения. В предпросмотре три кнопки для проверки.

Как пользоваться

1. Выберите положение, цвета и скругления.
2. Настройте задержку и стрелку.
3. Скопируйте HTML и CSS.

Когда использовать

• Пояснение значков без текста.
• Подсказки в формах.
• Кнопки действий в панелях.

Частые вопросы

Работает ли tooltip на телефоне?

На телефоне наведения мыши нет; подсказка появляется, когда элемент получает фокус, при касании кнопки или ссылки. Поэтому не помещайте в tooltip информацию, которая обязательно нужна человеку: она должна быть и в тексте страницы.

Как обеспечивается доступность?

Текст подсказки находится в элементе с role=tooltip, связанном с кнопкой через aria-describedby, чтобы программа чтения с экрана читала его вместе с названием кнопки. Он появляется и при фокусе с клавиатуры (focus-visible) и не зависит только от цвета.

Почему у подсказки есть задержка появления?

Небольшая задержка не даёт подсказкам мигать, когда мышь просто проходит над элементом по пути в другое место. Исчезает эффект сразу.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты