Css tooltip data attr

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

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

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

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

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

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

Метод с использованием HTML

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

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

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

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

Метод с использованием CSS

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

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

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

a#tooltipdemo < position: relative ; >a#tooltipdemo:hover::after

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

Этот способ отображения всплывающей подсказки использует большое количество различных функций: свойство 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.

a.customdatademo < position: relative ; >a.customdatademo:hover::after

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

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

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

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

Чтобы всплывающая подсказка появлялась рядом с элементом, над которым находится указатель мыши, я использовал несколько приемов. Я установил для исходного элемента относительное позиционирование (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-адресом этого изображения.

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

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

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

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

Вадим Дворников автор-переводчик статьи « How to Add a Tooltip in HTML/CSS (No JavaScript Needed) »

Пожалуйста, оставьте ваши мнения по текущей теме материала. За комментарии, лайки, подписки, дизлайки, отклики огромное вам спасибо!

Источник

Тултипы на CSS3 и HTML5

В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.

Дисклеймер

На самом деле, css attr() для свойства псевдоэлемента content появился в CSS2 и в данном способе, в общем-то, нет ничего нового.

Простой способ

Этот способ сгодится там, где нужны небольшие «тултипчики» — всплывающие подсказки.

.tooltip < border-bottom: 1px dotted #0077AA; cursor: help; >.tooltip::after < background: rgba(0, 0, 0, 0.8); border-radius: 8px 8px 8px 0px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); color: #FFF; content: attr(data-tooltip); /* Главная часть кода, определяющая содержимое всплывающей подсказки */ margin-top: -24px; opacity: 0; /* Наш элемент прозрачен. */ padding: 3px 7px; position: absolute; visibility: hidden; /* . и скрыт. */ transition: all 0.4s ease-in-out; /* Добавить плавности по вкусу */ >.tooltip:hover::after < opacity: 1; /* Показываем его */ visibility: visible; >

Мы берём некий элемент (В нашем случае span), добавляем к нему атрибут с текстом, который будет показан и берём псевдоэлемент ::after. В content этого псевдоэлемента мы, пользуясь замечательнейшим свойством attr(), присваиваем нашей всплывающей подсказке текст и потом по :hover показываем его.
Думаю, остальные свойства понятны по комментариям в коде.

Отдельно хочу отметить, как ведёт себя анимация в Chrome и Opera (Возможно и в IE, за его отсутствием проверить я не имею никакой возможности).
Её нет. Связано это с тем, что WebKit и Opera не применяют transitions и animation к псевдоэлементам ::before и ::after.
По этому поводу в багтрекере WebKit зарегистрирован баг.

Способ для более сложных тултипов

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

Далее я рассмотрю лишь пример того, что можно сделать этим способом.

.htooltip span < /* Внешний вид нашего тултипа */ background-color: rgba(0,0,0, 0.8); border-radius: 15px 15px 15px 0px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); color: #fff; margin-left: 2px; margin-top: -75px; opacity: 0; /* Делаем его прозрачным */ padding: 10px 10px 10px 40px; position: absolute; text-decoration: none; visibility: hidden; /* И прячем */ width: 350px; z-index: 10; >.htooltip:hover span < /* По hover отображаем тултип */ opacity: 1; visibility: visible; >.htooltip span img < /* Изображение для примера */ border: 0 none; float: left; margin: -71px 0 0 -234px; opacity: 0; position: absolute; visibility: hidden; z-index: -1; >.htooltip:hover span img < /* Показываем изображение */ opacity: 1; visibility: visible; >

Всё просто. Данные примеры можно лицезреть на этой страничке.

P.S. Некоторые спросят: А где же HTML5? В статье упомянуты data-* атрибуты, являющиеся частью спецификации HTML5.

Источник

Работа с data атрибутами в HTML/CSS/JS

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

Использование data атрибутов в HTML и CSS

Data атрибут — это очень гибкий инструмент и сейчас мы рассмотрим, как можно его использовать в HTML и CSS.

Как добавить data атрибут к HTML тегу

Вначале обязательно ставим префикс data, затем через дефис указываем какое-то наше слово подходящее по смыслу и само значение. Например мы хотим отсортировать только категорию с домашними питомцами. Все слова, за исключением самого префикса data-*, мы можем придумывать свои собственные. Так мы можем управлять отдельными группами элементов, помеченные data атрибутами. Это удобно для создания интерактива на языке JavaScript.

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

Пример стилизации элементов с data атрибутом

Мы можем стилизовать любой элемент по его data атрибуту. В CSS коде селектор data атрибута заключается в квадратные скобки. Обращаться можно только по названию атрибута, по тегу + название или по классу (id) + название.

// CSS код
// селектор по названию атрибута
[data-size=»large»] font-size: 30px;
padding: 20px;
>

// селектор по тегу и названию
div [data-size=»large»] font-size: 30px;
padding: 20px;
>

// селектор по классу и названию
large_btn.[data-size=»large»] font-size: 30px;
padding: 20px;
>

Принцип создания подсказок с data атрибутом на CSS

Прописываем текст подсказки в data атрибуте тега. Затем с помощью псевдоэлементов ::before или ::after передать в функцию attr значение атрибута data-tooltip.

[data-tooltip]::after content: attr(data-tooltip);
>

Использование data атрибутов в JavaScript

В JS существует, как минимум два способа получения data атрибута:

Первый способ, через getAttribute и setAttribute

Указываем выбранный на странице элемент (тег, id, класс), сам метод getAttribute и название атрибута, который надо получить.

Метод setAttribute добавляет значение, указанное вторым параметром («pillows») в data атрибут в первом параметре («data-filter»).

Второй способ, через объект dataset в структуре DOM

Доступ к коллекции dataset мы получаем по ключу (слово после префикса data-*).

// Получение data атрибута
div.dataset.person

// Добавление значения для data атрибута
div.dataset.person = «Donald»

Работа с data атрибутами в JavaScript — достаточно актуальная тема, с которой вы будете часто встречаться, более основательно познакомиться с data атрибутами и не только, вы сможете в моем видеокурсе по JavaScript.

Итоги

Data атрибуты позволяют хранить разную информацию об элементе, которая может помочь для работы скриптов, а также для CSS стилизации элементов. HTML код с созданными атрибутами с data-* префиксом будет, абсолютно валидным. Создавать свои собственные data атрибуты для хранения значений стало возможным лишь в HTML5, до этого такой возможности очень не хватало веб-разработчикам. Вот список самых востребованные задач, которые удобно решать с помощью data атрибутов:

Создано 16.11.2020 10:06:02

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 1 ):

Очень классная статья. DATA атрибуты удобная штука в помощь создания алгоритмов на JS при выборе пользователем сайта какого-либо товара для совершения покупки. Если присваивать конкретному товару или группе товаров DATA атрибут в коде HTML 5, то можно перейти к расчётам его цены в различном сочетании свойств товара. Например, мне удалось после изучения курса Михаила по JS написать алгоритм кода калькулятора для расчёта цены металлических сварных решёток разных размеров и покраски. При этом каждый рисунок решётки получил кнопку расчёта цены, что сильно приближает клиента к пониманию без общения с менеджерами сайта.Посмотреть эту работу калькуляторов можно на моей странице https://servis.kharkov.ua/re/ . Кроме того, я использовал технологию показа модального окна, причём не одного, а нескольких окон на всего одной странице на базе статьи М.Русакова о создании модального окна.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источник