Как создается всплывающая подсказка с помощью HTML и CSS
В этой статье рассказывается о том как создается всплывающая подсказка с помощью HTML и CSS. Рассматриваемые способы не используют JavaScript, поэтому ваша веб-страница будет работать, даже если пользователь отключил поддержку этой технологии в своем браузере.
Проблема с всплывающими подсказками
Вот некоторые из недостатков применения всплывающих подсказок:
- Они не отображаются на смартфонах и других сенсорных устройствах.
- Недоступны для людей с ограниченными возможностями. Пользователи, которые полагаются на программы чтения с экрана, не смогут узнать, какую информацию содержит всплывающая подсказка.
Используйте всплывающие подсказки только для предоставления дополнительной информации, без которой пользователи смогут взаимодействовать с функционалом сайта.
Метод с использованием 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 и заменяет его текстом.
Вместо заключения
Какой бы способ реализации вы не выбрали, всегда не забывайте о проблемах, связанных с использованием всплывающих подсказок. Убедитесь, что важная информация всегда отображается без необходимости дополнительного взаимодействия.