Как добавить всплывающую подсказку с помощью HTML и CSS

В данной статье рассматриваются два метода добавления всплывающей подсказки при помощи HTML и CSS. Они не используют JavaScript, так что веб-страница будет работать, даже если посетитель отключил поддержку данной технологии в браузере.

Проблема с всплывающими подсказками

Вот некоторые из недостатков применения всплывающих подсказок:

  1. Они не выводятся на смартфонах и иных сенсорных устройствах.
  2. Недоступны для людей с ограниченными функциями. Посетители, которые полагаются на программы чтения с экрана, не смогут узнать, какую информацию включает всплывающая подсказка.

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

Способ с использованием HTML

Самый простой добавления всплывающих подсказок – атрибут title.

Посмотрите на пример, приведенный ниже.

Если вы планируете увидеть подсказку, просто наведите указатель мыши на ссылку. title — это глобальный атрибут, который можно без труда добавлять к любому элементу HTML.

В приведенном выше примере я использовал его для ссылки. Но вы можете добавить его к любому элементу: к абзацу или целому столбцу, заключенному в блок <div>.

Способ с использованием CSS

Другой метод заключается в использовании CSS для выведения всплывающей подсказки. Он может настраивать внешний вид подсказки и даже использовать картинки.

Вот HTML-код предыдущего примера.

<a href="https://www.thesitewizard.com/html-tutorial/what-is-html.shtml" id="tooltipdemo">HTML and CSS</a>

Для реализации нового метода используется CSS-свойство content и псевдоэлемент:after.

a#tooltipdemo { position: relative;}a#tooltipdemo:hover::after { content: "What is HTML? What is CSS?"; position: absolute; top: 1.1em; left: 1em; min-width: 200px; border: 1px #808080 solid; padding: 8px; color: black; background-color: #cfc; z-index: 1;}

Наведите курсор на ссылку, чтобы увидеть всплывающую подсказку в действии.

Этот метод выведения всплывающей подсказки использует большое число разных возможностей: свойство content, псевдоэлемент::after, positionfor::after и т. д. Но если посетитель применяет устаревший браузер, то всплывающая подсказка не будет выводиться корректно.

Вы также можете использовать во всплывающей подсказке другой формат контента. К примеру, можно без труда выводить изображение.

CSS для всплывающей подсказки с изображением выглядит следующим образом:

span#imagedemo { position: relative; text-decoration: underline dotted; cursor: help;}span#imagedemo:hover::after { content: url("../images/tsw88x31pow.gif"); position: absolute; top: 1.1em; left: 1em; background-color: transparent; z-index: 1;}

Если веб-страница работает на основе HTML5, вы можете воспользоваться новыми пользовательскими атрибутами данными. Они может реализовать подсказку в HTML-коде, а не в CSS. В этом случае подсказки являются содержимым, а не стилем CSS.

Код примера на HTML5:

<a href="https://www.thesitewizard.com/html-tutorial/what-is-html.shtml" data-tooltip="What is HTML? What is CSS?"class="customdatademo">HTML and CSS</a>.

А это CSS:

a.customdatademo { position: relative;}a.customdatademo:hover::after { content: attr(data-tooltip); position: absolute; top: 1.1em; left: 1em; min-width: 200px;  border: 1px #808080 solid;  padding: 8px;  color: black;  background-color: #cfc ;  z-index: 1 ;}

Демонстрация: всплывающая подсказка с использованием пользовательских атрибутов данных HTML5:

Но этот метод не будет работать в устаревших браузерах. А также в программах чтения с экрана.

Объяснение примеров кода на CSS

a#tooltipdemo:hover::after {

Часть :hover приведенного выше селектора означает, что стилевые правила применяются только тогда, когда курсор мыши наводится на элемент. Псевдоэлемент ::after гарантирует, что стили применяются к последнему дочернему элементу (который создается данными правилами) текущего элемента.

a#tooltipdemo {  position: relative ;}

Чтобы всплывающая подсказка появлялась рядом с элементом, над которым находится указатель мыши, я использовал пару приемов. Я установил для исходного элемента относительное позиционирование (position: relative). Это делает его точкой отсчета для position: absolute дочернего псевдоэлемента.

position: absolute ;top: 1.1em ;left: 1em ;

Далее всплывающая подсказка помещается на 1.1em ниже ссылки. Это смещает ее чуть ниже слов, чтобы она не закрывала их. А также на 1em вправо, чтобы подсказка смещалась примерно на 1 символ в сторону.

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

При использовании атрибута title браузеры автоматом регулируют положение всплывающей подсказки, чтобы ее можно без труда было увидеть в полном объеме.

Я также присвоил значение z-index 1, чтобы всплывающая подсказка выводилась над существующим содержимым.

Остальная часть CSS-кода предназначена для управления внешним видом всплывающей подсказки и содержит обычные свойства padding, border и width.

content: "What is HTML? What is CSS?" ;

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

<a data-tooltip="What is HTML? What is CSS?" ...

В примере на HTML5 создается пользовательский атрибут данных с именем «data-tooltip» и присваивается ему некоторый текст.

content: attr(data-tooltip) ;

Далее текст вставляется в содержимое с помощью возможности CSS attr(). Проще говоря, attr(data-tooltip) принимает значение атрибута data-tooltip и заменяет его текстом.

Вместо заключения

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *