Решение: всплывающие подсказки на мобильных в HTML и JS

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

Для внедрения подсказок на мобильных устройствах применяйте псевдоэлементы CSS и сенсорные события. Вместо обычных для десктопов состояний наведения используйте в CSS псевдокласс :active для активации подсказок при касании:

<a href="#" title="Текст подсказки" ontouchstart="">Прикоснитесь ко мне!</a>

a:active:after {
  content: attr(title);
  position: absolute;
}

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

Создание полностью работоспособных подсказок

Надёжные подсказки: отказываемся от title

Атрибут title не всегда корректно взаимодействует с мобильными устройствами, поэтому для улучшения доступности используем HTML data-атрибуты с небольшим дополнением JavaScript:

<button data-tooltip="Это подсказка" onclick="showTooltip(this)">
  Нажмите для получения информации
</button>

function showTooltip(element) {
  // Время раскрыть подсказку!
}

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

Расположение подсказок: соблюдаем порядок

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

function positionTooltip(element, tooltip) {
  // Находим идеальное место для подсказки
}

Совместимость с сенсорными экранами

Для удобства работы с подсказками на сенсорном экране используйте ontouchstart вместо :hover и обрабатывайте JavaScript-события, такие как touchend, устанавливая время показа и скрытия подсказок, в особенности для интерактивных элементов.

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

Продемонстрируем ситуацию на примере:

Парк с указателями:

Посетитель (🚶‍♂️) идет по дороге и приступает к развилке (🔀), где установлен сенсорный указатель (👆).

Без указателя: 🚶‍♂️ приближается к 🔀 ... 🤷‍♂️❓

С указателем на сенсорном экране: 👆🚶‍♂️ подходит к 🔀 ... 💡🛤️!

При касании по указателю информация мгновенно делается доступной.

Указатель (🔍): Коснитесь меня для получения информации!

🚶‍♂️ + 👆 = 🌟 Информация доступна!

Таким образом происходит взаимодействие в мобильном вебе.

Искусство создания подсказок для мобильных устройств

Принимаем во внимание многообразие мобильных устройств с помощью медиазапросов CSS

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

@media (max-width: 600px) {
  // Стили для небольших экранов
}

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

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

function toggleTooltip(event) {
  // Сначала видна, теперь нет
}
document.addEventListener('touchstart', toggleTooltip);

Доступность: учитываем все группы пользователей

Не забывайте про aria-describedby и другие ARIA-атрибуты, которые помогут скринридерам идентифицировать подсказки. Управление фокусом позволит пользователям, которые взаимодействуют с устройством с помощью клавиатуры, также воспользоваться подсказками.

Переосмысливаем подход к подсказкам: что насчет модальных окон?

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

<div id="modal" role="dialog" aria-labelledby="modalTitle" aria-modal="true">
  <!-- Здесь будет расположена значительная информация -->
</div>

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

1. ARIA: роль tooltip – Доступность | MDN — детальное руководство по созданию доступных подсказок.
2. Подсказки для аббревиатур | CSS-Tricks — советы и примеры для создания подсказок в HTML.
3. CSS Подсказки — урок по созданию подсказок с помощью CSS.
4. Подробное руководство по дизайну мобильных приложений — Smashing Magazine — глубокое погружение в дизайн мобильных интерфейсов.
5. Подсказки · Bootstrap — подход Bootstrap к созданию адаптивных и интерактивных подсказок.
6. Самые последние вопросы 'tooltip+mobile' – Stack Overflow — лучшие практики и советы сообщества по подсказкам на мобильных устройствах.