Тултип на теге img: решение проблемы отображения в Яндекс

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

Для добавления всплывающего совета к изображению, вы можете использовать элемент <img>, помещенный в контейнер <div>. С помощью псевдоэлемента ::after и CSS добавляется текст совета. Контейнеру нужно присвоить свойство position: relative;, а псевдоэлементу – position: absolute;. Вот пример такой реализации:

<div class="tooltip">
  <img src="image.jpg" alt="Описательный текст">
</div>

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::after {
  content: 'Текст всплывающего совета';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 5px;
  border-radius: 5px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover::after {
  visibility: visible;
  opacity: 1;
}

Согласно этому коду, при наведении на изображение, совет появится плавно, и вы сможете легко настроить его стиль, чтобы он гармонично вписывался в дизайн сайта.

Атрибут title в HTML: простой и быстрый способ добавить совет

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

<img src="image-source.jpg" alt="Информация об изображении" title="Так работает простой совет">

Совет будет автоматически отображаться, когда пользователь наведет курсор на изображение. Это невероятно удобно и не требует никакого дополнительного кода.

За пределами ожиданий: Создание персонализированного совета с помощью HTML, CSS и JavaScript

Позиционирование с использованием CSS и div

Если вы хотите создать более сложный совет, не ограниченный возможностями атрибута title, используйте контейнер <div> и стилизуйте его с помощью псевдоэлементов ::before или ::after:

<div class="tooltip" aria-describedby="tt1">
  <img src="image.jpg" alt="Описание изображения">
  <span id="tt1" class="tooltiptext">Подробный совет для пользователя.</span>
</div>

Абсолютное позиционирование и z-index позволят показать совет прямо над изображением.

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

Использование JavaScript для динамичной смены содержимого совета

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

document.querySelectorAll('img').forEach(img => {
  img.title = img.alt; // Совмещение текста из alt и title для максимальной информативности совета.
});

Этот код позволит советам реагировать на действия пользователя, делая ваш сайт более интерактивным.

Адаптация советов для адаптивного дизайна

При создании советов для различных устройств вам нужно учитывать следующее:

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

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

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

Наведение:        Появление совета:
👆                    🎈      
🖼️ ——————————→ 🖼️[🎈]

У каждого изображения есть совет, словно на невидимой ниточке, всегда готовый предложить пользователю что-то важное.

Доступность: Создание советов для всех пользователей

Обеспечение доступности советов – это очень важная задача. Все пользователи должны иметь возможность использовать советы:

• Свяжите советы с изображениями с помощью aria-describedby.
• Обеспечьте возможность управления советами с клавиатуры.
• Проверяйте работоспособность советов с экранными читалками и задайте им role="tooltip" для лучшей совместимости.

Лучшие практики и распространенные ошибки

Следует обратить внимание на такие аспекты:

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

Следование лучшим практикам позволит избежать многих проблем:

• Начните с простых решений на HTML и CSS перед переходом к более сложным вариантам.
• Тестирование советов в разных браузерах и на разных устройствах поможет обеспечить их правильное отображение.
• Содержимое советов должно быть кратким и соответствовать контексту.

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

1. CSS Tooltip на W3Schools — обучающий ресурс по созданию советов с помощью HTML и CSS.
2. title – HTML: HyperText Markup Language | MDN — детальный обзор функций атрибута title для создания советов браузера по умолчанию.
3. Добавление описаний к элементам с помощью aria-describedby – ADG — повышение доступности с помощью aria-describedby.
4. Tooltips · Bootstrap v5.0 — готовый плагин для создания советов в Bootstrap.
5. WebAIM: CSS в действии – Невидимое содержимое только для пользователей экранного чтения — рекомендации по созданию советов, доступных через клавиатуру.
6. Tippy.js – Библиотека для создания советов, всплывающих окон, выпадающих списков и меню — гибко настраиваемая библиотека для создания советов, если вам нужны продвинутые функции.