Добавление подсказки к div в HTML: эффект fadeIn/out

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

Для создания всплывающей подсказки, работающей полностью на CSS, используйте следующую структуру: div, внутрь которого вложен скрытый элемент span. span становится видимым, когда пользователь наведет на него курсор:

<div class="tooltip">Наведите на меня
  <span class="tooltiptext">Информация в подсказке</span>
</div>

.tooltip { position: relative; display: inline-block; }
.tooltip .tooltiptext {
  visibility: hidden; background-color: black; color: white;
  text-align: center; border-radius: 6px; padding: 5px;
  position: absolute; z-index: 1; top: 100%; left: 50%;
  transform: translateX(-50%); opacity: 0; transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
  visibility: visible; opacity: 1;
}

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

Улучшение всплывающей подсказки: добавляем JavaScript

Для более сложной интерактивности и расширения функционала подсказки может пригодиться JavaScript или jQuery. Для улучшения есть следующие возможности:

• Динамическое содержимое: JavaScript способен изменять содержимое подсказки в ответ на действия пользователя или другие события, используя данные из атрибутов или полученные из API-запросов.

• Интерактивное позиционирование: Изменяйте местоположение подсказки в зависимости от положения курсора, или для избежания перекрытия других элементов, используя свойство pointer-events: none; или JavaScript.

• Постоянная подсказка: Если вам необходимо, чтобы подсказка оставалась видимой долгое время, используйте атрибут data-tooltip-persistent и JavaScript для удержания её на экране.

• Анимированные эффекты: Пройдите дальше простых CSS-анимаций и добавьте плавное появление, прокрутку или отскок, что сделает подсказку более динамичной.

Пример оформления подсказки с использованием псевдоэлемента ::before:

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
[data-tooltip]:hover::before {
  opacity: 1;
}

Обязательно учтите необходимость простой подсказки с атрибутом title как резервного варианта для случаев, когда JavaScript отключен.

Переход на следующий уровень с CSS

Создавайте уникальные и эффективные всплывающие подсказки, придерживаясь следующих советов:

• Единообразие: Соблюдайте согласованность в оформлении с основным дизайном вашего сайта, в том числе применяя аналогичные отступы, цвета и шрифты.

• Адаптивность: Обеспечьте корректное отображение подсказок на разных устройствах и экранах, избегая выхода за границы экрана или перекрытия другими элементами.

• Доступность: Позаботьтесь о пользовательской доступности, в особенности для тех, кто использует клавиатуру и читающего экран. Прикладывайте ARIA-атрибуты для улучшения восприятия содержимого.

Пример оформления сложных всплывающих подсказок:

.tooltip {
  /* Базовые стили подсказки */
}
.tooltip::before {
  /* Стили стрелки или указателя, помогающие пользователю */
}

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

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

<div title="Секреты HTML">📖</div>

Наведите на книгу, и она откроет что находится внутри:

До наведения: 📖
После наведения:  📖🗨️ "Секреты HTML"

Легкое движение мыши позволяет открыть это скрытое знание. 🗨️✨

Мастера отображения подсказок: JavaScript и jQuery

С помощью библиотек и плагинов вы можете значительно расширить возможности использования всплывающих подсказок:

• jQuery Tooltip: Этот плагин добавляет множество анимаций и повышает интерактивность подсказки.

• Tippy.js: Библиотека с обширными настройками анимации и продвинутыми функциями для настройки стиля.

• Popper.js: Библиотека для идеального позиционирования всплывающих подсказок, которые всегда оказываются там, где требуется.

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

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

1. title – HTML: Гипертекстовый язык разметки | MDN — Раздел документации MDN Web Docs про атрибут title.
2. CSS Tooltip — Обучающий материал по созданию CSS-подсказок на W3Schools.
3. GitHub – atomiks/tippyjs: Библиотека для всплывающих подсказок, поповеров, выпадающих меню — Tippy.js, мощная библиотека для современных веб-подсказок.