Как добавить подсказку (tooltip) к изображению в HTML

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

К чему стремиться

Цель: при наведении курсора на изображение показывать компактную подсказку рядом с курсором, в которой можно выводить любые данные (например, X/Y пиксели внутри изображения). Решение должно:

• работать в современных браузерах (Chrome, Firefox, Safari, Edge);
• корректно позиционировать подсказку внутри контейнера изображения;
• поддерживать клавиатурный и тач-доступ;
• иметь простую настройку стилей и текста.

Быстрая реализация — пошагово

Ниже — пошаговая реализация, которая соответствует базовому сценарию из исходного примера.

1. Создайте файл index.html с базовой структурой:

2. Внутри body добавьте контейнер, который будет включать изображение и подсказку:

3. Вставьте изображение в контейнер (убедитесь, что файл image.jpg находится рядом с index.html):

4. Добавьте элемент подсказки под изображением в том же контейнере:

5. В добавьте базовые стили для контейнера и подсказки:

6. Добавьте скрипт в конце body. Ниже — простая версия, затем — улучшенная, более надёжная:

7. Откройте index.html в браузере и наведите курсор на изображение — должна появиться подсказка с координатами.

Важно: в простой реализации используются getBoundingClientRect() и clientX/clientY для надёжного расчёта координат внутри изображения независимо от прокрутки страницы.

Полный пример файла index.html (готово к использованию)

Ниже — объединённый, улучшенный пример с поддержкой клавиатуры и сенсорных экранов, а также с плавной анимацией.

Тонкости позиционирования и координат

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

Доступность и UX

• Добавьте role=”tooltip” и aria-hidden, обновляйте их при показе/скрытии.
• Сделайте изображение фокусируемым (tabindex=”0”), обработайте focus/blur, чтобы подсказка была доступна клавиатурным пользователям.
• Для тач-устройств используйте touchstart/touchmove/touchend и продумайте, когда скрывать подсказку (например, при двойном тапе или по таймауту).
• Не используйте pointer-events у подсказки, если она должна быть интерактивной (напр., содержать ссылку); в таком случае обрабатывайте клики аккуратно.

Улучшения и альтернативные подходы

1. Использовать библиотеку подсказок (Popper.js, Tippy.js) для сложного позиционирования и оптимизации под разные сценарии.
2. Рендерить подсказку внутри SVG или canvas, если изображение — интерактивная карта или диаграмма с собственными координатами.
3. Для больших изображений с масштабированием учитывать текущую трансформацию (scale) и DPI: координаты в пикселях могут отличаться от CSS-пикселов.
4. Встраивать данные меток в data-атрибуты элементов (data-x, data-y, data-info) и показывать контекстную информацию вместо простых координат.

Когда этот подход не подойдёт

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

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

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

• Подсказка появляется при наведении и исчезает при уходе курсора.
• Подсказка корректно показывает X и Y внутри изображения.
• Подсказка не уходит за границы контейнера (если применять ограничения).
• Подсказка доступна с клавиатуры (фокус) и корректно обрабатывает события тач‑устройств.

Разработчик — чек-лист

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

QA — чек-лист

• Наведение мышью: подсказка появляется и позиционируется корректно.
• Прокрутка страницы: позиция подсказки остаётся корректной.
• Тач: подсказка появляется на первом тапе и скрывается на втором/по таймауту.
• Клавиатура: фокус даёт подсказку.

Дизайнер — чек-лист

• Цвета соответствуют контрастным требованиям (WCAG).
• Размер шрифта и отступы — читаемы на мобильных.
• Анимация не отвлекает и не длится дольше 200ms.

Тесты и приёмка

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

• Сценарий 1: Навести курсор в центр изображения — ожидается подсказка с приблизительно центральными координатами.
• Сценарий 2: Навести курсор в левый верхний угол — X и Y около 0.
• Сценарий 3: Прокрутить страницу, снова навести — координаты внутри изображения корректны.
• Сценарий 4: На мобильном — тапнуть и сдвинуть палец, подсказка обновляет координаты.

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

• Прохождение всех тестовых сценариев на целевых браузерах.
• Нет визуальных артефактов при быстром перемещении курсора.

Шпаргалка — кратко

• Для надёжных координат: use rect = el.getBoundingClientRect(); x = clientX - rect.left.
• Для позиционирования внутри контейнера: убедитесь, что контейнер position: relative.
• Для доступности: role=”tooltip”, aria-hidden, tabindex для фокусируемых элементов.

Заключение

Вы теперь знаете, как реализовать подсказку над изображением, показывающую X/Y координаты курсора, и как улучшить её для реальных продуктов: поддержка клавиатуры, тача, корректное позиционирование и обработка границ. Для сложных кейсов рассмотрите использование проверенных библиотек или рендер подсказок в канве/векторе.

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