Создание подсказок для кнопок HTML без атрибута Title

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

Есть несколько подходов к организации всплывающих подсказок на кнопках. Один из самых простых – использовать атрибут title, который отображает текст подсказки при наведении курсора:

<button title="Текст подсказки">Наведите на меня!</button>

Если вы задумываетесь над созданием стилизованной подсказки на CSS, примените псевдоэлемент ::after для визуального эффекта:

<button class="tooltip-btn">Наведите<span class="tooltip">Подсказка</span></button>

.tooltip-btn { position: relative; }
.tooltip { 
  visibility: hidden; position: absolute; bottom: 100%; left: 50%; 
  transform: translateX(-50%); background: black; color: white; 
  text-align: center; border-radius: 3px; padding: 5px; z-index: 1; 
}
.tooltip-btn:hover .tooltip { visibility: visible; }

Этот CSS код создаст изящную всплывающую подсказку, которая появляется при наведении курсора.

Усовершенствование с помощью JavaScript

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

document.querySelector('.tooltip-btn').addEventListener('mouseenter', function(event) {
  var tooltip = this.querySelector('.tooltip');
  tooltip.style.visibility = 'visible'; // Так мы делаем подсказку видимой...
  // Здесь можно добавить логику для анимаций и переходов
});

document.querySelector('.tooltip-btn').addEventListener('mouseleave', function(event) {
  var tooltip = this.querySelector('.tooltip');
  tooltip.style.visibility = 'hidden'; // И снова подсказка не видна!
});

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

Доступность с помощью ARIA-атрибутов

Использование ARIA-атрибутов делает подсказки доступными для пользователей ассистивных технологий, что важно для обеспечения удобства взаимодействия с интерфейсом.

<button aria-describedby="tooltip1">Наведите на меня!</button>
<div id="tooltip1" role="tooltip" class="hidden">Доступная подсказка</div>

.hidden { display: none; }

Сочетание aria-describedby и role="tooltip" позволяет создавать понятные указания для ассистивных технологий.

Расширяем возможности с помощью сторонних библиотек

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

<link href="tippy.js/dist/tippy.css" rel="stylesheet">
<script src="tippy.js/dist/tippy.min.js"></script>

tippy('.tooltip-btn', {
  content: "Вот такая подсказка от Tippy!", // Вот такая изюминка
  // ... остальные настройки ...
});

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

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

Эмодзи-иллюстрация помогает наглядно показать концепцию всплывающих подсказок для элемента button:

🏠🏠🏠 // Три домика – это наши кнопки │ │ │
│ │ │
🏴 🏴 🏴 // Флаги – это подсказки, которые появляются при наведении на кнопки

Представьте, что курсор, указывающий на домик, как бы поднимает флаг с информацией:

<button title="Текст подсказки">🏠</button>
<button title="Загляните внутрь и узнаете больше">🏠</button>  
<button title="Откройте дверь, чтобы обнаружить тайны">🏠</button>

Такое описание звучит вроде бы как приглашение на секретную вечеринку, не так ли?

Даже сложные подсказки: преимущества div-элементов

Если вам необходимо использовать более сложное содержимое в подсказке, div-элементы могут оказаться подходящим инструментом, обладающим необходимой гибкостью, особенно в сочетании с механизмами управления видимостью.

<button class="tooltip-btn">Наведите на меня
  <div class="rich-tooltip"> 
    <img src="info-icon.png" alt="">&amp;#128161; 
    <p>Здесь вас ждёт удивительное содержимое: картинки, ссылки и многое другое!</p>
  </div>
</button>

Этот подход открывает целый мир новых возможностей.

Подводные камни и способы их избежать

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

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

1. CSS Tooltip – Пошаговое руководство по созданию подсказок.
2. ARIA: tooltip role – Accessibility | MDN – Подробно о том, как делать интерфейсы доступными с помощью ARIA.
3. Tooltips · Bootstrap – Инструкции по работе с подсказками в компонентах Bootstrap.
4. ARIA Authoring Practices Guide | APG | WAI | W3C – Руководство по созданию доступных веб-приложений.
5. A Whole Bunch of Amazing Stuff Pseudo Elements Can Do | CSS-Tricks – О замечательных возможностях псевдоэлементов ::after и ::before, показанных на практических примерах.
6. Tooltip | Foundation for Sites 6 Docs – О том, как реализовать подсказки при помощи фреймворка Foundation.
7. Tippy.js – Tooltip, Popover, Dropdown, and Menu Library – Обзор библиотеки Tippy.js для создания подсказок.