Создание подсказки при наведении в HTML и CSS без JavaScript

Быстрый ответ

Создание всплывающих подсказок в HTML возможно благодаря атрибуту title. При наведении курсора на элемент, текст, содержащийся в title, открывается в виде подсказки. Это просто и эффективно!

Пример:

<a href="#" title="Текст подсказки">Наведите на эту ссылку</a>

Данный код привязывает всплывающую подсказку к любому HTML-элементу, используя исключительно атрибут title.

Атрибут title: преимущества и ограничения

Атрибут title — это наивысший по простоте способ добавить подсказку. Его преимущества:

• Не требуется JavaScript: Никакого JavaScript-кода.
• Универсальная поддержка: Работает в большинстве современных браузеров.
• Широкая применимость: Можно привязывать к большинству HTML-элементов.

Но стоит заметить: Несмотря на удобность атрибута title, его возможности кастомизации ограничены. Если требуются более широкие настройки, придется обратиться к возможностям JavaScript или CSS.

Визуализация

Процесс добавления всплывающей подсказки в HTML можно сравнить с процессом шептания секрета элементу, который становится слышным только при приближении курсора:

Текст: "Мудрая сова 🦉"
При наведении курсора: [🔦] -> Открывает: "Эта сова знает все тайны леса! 🌳🤫"

Вот так это сделано с атрибутом title:

<span title="Эта сова знает все тайны леса! 🌳🤫">Мудрая сова 🦉</span>

Наведите курсор на изображение совы, чтобы узнать её секрет! 🗨️✨

Продвинутые методы создания подсказок: CSS и jQuery

Персонализированные подсказки при помощи CSS

Если атрибут title не удовлетворяет вашим креативным запросам, то стили CSS могут помочь в составлении персонализированных подсказок.

<a href="#" class="custom-tooltip">Наведите эту ссылку<span class="tooltip-text">Оставайтесь немного и послушайте</span></a>

.custom-tooltip .tooltip-text {
  visibility: hidden;
  /* Настраиваем стили согласно своим предпочтениям */
  ...
}

.custom-tooltip:hover .tooltip-text {
  visibility: visible; /* Вот такое чудо! */
}

CSS-подсказки дают возможности для кастомизации и анимации ваших подсказок на свое усмотрение: изменение цвета, стиля, добавление анимаций и так далее.

Подробнее об этом расскажет наш спикер на видео

Динамические подсказки посредством jQuery UI

Если вам необходимо реализовать настроиваемые динамические подсказки, то лучшее решение — это jQuery UI:

• Подключите библиотеки jQuery и jQuery UI.
• Включите виджет подсказок jQuery UI, чтобы оживить их работу.
• Темы jQuery предоставляют обширный спектр настроек, начиная с версии jQuery UI 1.9+.

$(document).ready(function(){
  $(document).tooltip(); // Теперь пришло время для подсказок!
});

Успех или неудача? Учтите удобство использования

Подсказки могут как помочь, так и создать проблемы. Обратите внимание на доступность и удобство использования:

• Не размещайте критически важные данные исключительно в подсказках.
• Убедитесь, что подсказки легко управляются с клавиатуры.
• Рассмотрите использование aria-label для лучшей поддержки пользователей с особыми потребностями.

При создании идеальной подсказки всегда помните о комфорте пользователей и не злоупотребляйте ими — избыток подсказок может утомить пользователя (не переусердствуйте 😜).

Полезные материалы

1. title – HTML: Гипертекстовый язык разметки | MDN — Объяснение использования атрибута title для создания базовых подсказок в HTML.
2. CSS Tooltip — Руководство W3Schools по созданию настроиваемых всплывающих подсказок на CSS.
3. WebAIM: CSS in Action – Невидимый контент для пользователей скринридеров — Понимание использования невидимого содержимого и лучших практик для улучшения доступности подсказок.
4. ARIA: tooltip role – Доступность | MDN — Реализация aria-label и ролей tooltip для создания доступных подсказок.
5. Как отобразить подсказку Bootstrap для SVG-объекта? – Stack Overflow — Обсуждение на Stack Overflow с полезными советами пользователей по созданию подсказок для SVG-объектов.