Добавление подсказок к элементу span: HTML, CSS, JS

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

Всё, что вам нужно для добавления всплывающей подсказки к элементу span, – это атрибут title:

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

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

Возможности и ограничения атрибута title

Атрибут title – простое и удобное решение. Но стоит учесть, что его возможности не безграничны. К примеру, вы не сможете изменить стиль всплывающей подсказки, он зависит от браузера. Если вам нужны более гибкие настройки подсказки, то пора задействовать CSS и JavaScript.

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

Атрибут title можно сравнить с чемоданом, к которому прикреплена бирка:

До:        🏷 (Ваш span)
После:     🏷💬 (Ваш span с подсказкой)

Это как метка, которую мы приставляем к элементу span:

<span title="Это ваша подсказка!">Наведите мышь на меня!</span>

При наведении курсора подсказка появится, как в окошке: ⬆️👆.

Элегантные подсказки на CSS

Чтобы создать стильное всплывающее сообщение с помощью CSS, воспользуйтесь псевдоэлементами :before и :after.

/* Обёртка для подсказки */
.tooltip { 
  position: relative; 
  display: inline-block; 
}

/* Текст подсказки */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px; 
  padding: 5px;
  position: absolute; 
  z-index: 1;
  bottom: 125%;
  left: 50%; 
  margin-left: -60px;
  
  /* Анимация появления */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Стрелочка подсказки */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%; 
  left: 50%; 
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Блок отображения подсказки при наведении */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Такой метод позволяет центрировать подсказку относительно элемента и добиться эффекта плавного появления.

Продвинутые техники CSS для подсказок

Использование функции attr()

Можно включить динамический текст подсказки в data-атрибут элемента:

<span class="tooltip" data-tooltip="Динамический текст подсказки">Наведите мышь на меня!</span>

И при помощи функции attr(), получить его для отображения в подсказке:

.tooltip::after {
  content: attr(data-tooltip);
  /* остальные стилевые настройки */
}

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

Умное позиционирование подсказок

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

Расширяем возможности подсказок с помощью JavaScript и jQuery

Для применения более продвинутых визуальных эффектов, обработки событий или реализации интерактивности при создании подсказок используйте JavaScript и библиотеки, такие как jQuery UI. В частности, jQuery UI позволяет настраивать позицию подсказок, вставлять различный контент и контролировать время, в течение которого подсказка остается видимой:

$(function() {
  $(document).tooltip({
    position: {
      my: "left+15 center", 
      at: "right center"
    },
    show: { 
      effect: "slideDown", 
      delay: 250
    },
    // добавление дополнительных опций по желанию
  });
});

Так, демонстрируется гибкость и мощь jQuery UI, которая предоставляет множество настроек для стилизации подсказок.

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

1. title – HTML: язык гипертекстовой разметки | MDN — детализированная информация об атрибуте title для HTML подсказок.
2. CSS всплывающая подсказка — учебник по созданию подсказок на CSS.
3. Как добавить CSS с помощью Javascript? – Stack Overflow — дополнительная информация о настройке стилей подсказок с помощью JavaScript.
4. Just a moment... — пример реализации подсказки на чистом CSS на CodePen.
5. Руководство по подсказкам — рекомендации по созданию эффективных подсказок для веб-сайтов.