Подсказка (tooltip) над изображением: реализация на HTML, CSS и JavaScript

Интерактивные сайты привлекают внимание и улучшают восприятие. Один из простых приёмов — показывать подсказку (tooltip) при наведении на изображение: например, карту, диаграмму или галерею с доп. информацией. Ниже — пошаговое руководство, рабочие примеры и практические рекомендации для продакшена.

Как добавить подсказку над изображением в HTML-файле

Изображения удобно комбинировать с подсказками: они помогают показать дополнительную информацию, не загромождая интерфейс. Мы реализуем подсказку с помощью CSS и JavaScript — сначала минимальный пример, затем улучшенный и надёжный вариант.

Важно: для доступности добавим aria-атрибуты и поддержку клавиатуры/тач-событий.

Минимальный пример (быстро проверить идею)

Создайте файл index.html и вставьте базовую структуру и код ниже.

Этот код быстро покажет подсказку, но имеет ограничения (см. раздел “Когда это не работает”).

Как вычислить и корректно отобразить координаты X и Y пикселя изображения

Пояснение терминов:

• clientX/clientY — координаты курсора относительно окна просмотра (viewport).
• offsetX/offsetY — координаты относительно целевого элемента (в данном случае изображения), но их поведение меняется при вложенных элементах.
• getBoundingClientRect() — даёт позицию и размеры элемента в координатах окна просмотра.

Рекомендуем вычислять координаты относительно изображения через getBoundingClientRect(), чтобы позиция оставалась корректной при скролле, отступах и масштабировании.

Улучшенный, надёжный пример с учётом границ и адаптивности

Этот пример:

• Использует getBoundingClientRect() для точных координат внутри изображения.
• Центрирует подсказку по горизонтали и не позволяет ей выходить за границы изображения.
• Поддерживает клавиатуру и базовый поведенческий паттерн для тач-устройств.

Дополнительные эффекты и улучшения

• Анимация появления: добавьте transition и opacity для плавного появления/исчезания.
• Стилизация: можно показывать мини-миниатюру (thumbnail), метаданные или линк внутри подсказки.
• Использование SVG или canvas: если изображение — интерактивная карта/плотность пикселей, лучше рендерить наложения в SVG/canvas и подписывать точки.
• Библиотеки для подсказок: tippy.js, popper.js — дают готовое позиционирование и всплывающие подсказки с учётом границ экрана.

Контроль видимости и производительности

• pointer-events: none на подсказке делает её «невидимой» для мыши — курсор всегда попадает на изображение.
• Если изображение большое и событий много, дебаунсить обработчик mousemove не нужно, но можно оптимизировать вычисления.
• На слабых устройствах частая обработка mousemove может нагружать; можно уменьшить частоту обновлений с помощью requestAnimationFrame.

Когда это не работает / ограничения

• Hover не существует на большинстве мобильных устройств — реализуйте альтернативу через тап/long-press.
• SVG/canvas с масштабированием требует дополнительной нормализации координат (учитывайте transform/scale).
• offsetX/offsetY ненадёжны при вложенных элементах; предпочтительнее clientX - rect.left.

Критерии приёмки

• Подсказка отображается при наведении и скрывается при уходе курсора.
• Координаты в подсказке соответствуют пикселей изображения (проверка: крайняя левая точка = 0, правая = width-1).
• Подсказка не уходит за пределы изображения: проверка в углах и центре.
• Поведение приемлемо на десктопе и задано для тач-устройств (описанный fallback).
• Подсказка доступна с клавиатуры (фокус/blur).

Чек-листы по ролям

• Фронтенд-разработчик:

  • Вставить HTML/CSS/JS из улучшенного примера
  • Добавить aria-role и tabindex
  • Проверить поведение при масштабировании и скролле

• QA-инженер:

  • Проверить отображение в Chrome/Firefox/Safari
  • Проверить в мобильных браузерах, эмуляторах и на реальных устройствах
  • Тестовые случаи: курсор в каждом углу, ресайз окна, масштаб страницы

• Дизайнер:

  • Подтвердить визуальные отступы, цвета, контрастность и поведение при недостаточном пространстве

Тестовые сценарии / Acceptance criteria

• Навести курсор в левый верхний угол изображения: подсказка видна и показывает X: 0, Y: 0.
• Навести курсор в правый нижний угол: подсказка не выходит за правую границу и показывает X примерно = width-1.
• Фокус на изображении через Tab: подсказка появляется и доступна скринридеру.
• На мобильном: короткий тап показывает подсказку, второй тап — выполняет альтернативное действие.

Совместимость и советы по миграции

• Для проектов, где уже используется библиотека подсказок — мигрируйте на неё, если нужно сложное поведение и кроссбраузерность.
• Для карт/диаграм лучше переключиться на SVG/canvas и оперировать логическими координатами (проекции, масштаб).

Важно: не используйте title-атрибут для кастомных подсказок с HTML-контентом — он ограничен и не стилизуется.

Краткое резюме

Подсказки над изображением — простой способ повысить интерактивность. Для продакшена используйте вычисление координат через getBoundingClientRect(), учитывайте мобильные устройства и доступность, а для сложных сценариев — готовые библиотеки или рендеринг через SVG/canvas.

Источник: код и идеи адаптированы для образовательных целей — практический пример доступен в открытых репозиториях под MIT-лицензией.