Как добавить тултип в html

Всплывающая подсказка

Всплывающей подсказкой называется блок с текстом, который появляется при наведении на элемент веб-страницы (рис. 1). Цель такой подсказки — дать более подробную информацию о содержимом элемента. К примеру, для ссылок подсказкой может служить адрес ссылки или краткое описание сайта, на который ведёт ссылка.

Рис. 1. Вид всплывающей подсказки

Для создания подсказки в HTML добавим к нужному элементу пользовательский атрибут data-tooltip с текстом подсказки.

Вывод текста и его оформление дальше возлагается на CSS. Само отображение содержимого атрибута происходит через свойство content. Добавляем его к псевдоэлементу ::after, который привязываем к селектору [data-tooltip] — это позволяет создавать подсказку для любого элемента.

[data-tooltip]::after < content: attr(data-tooltip); /* Выводим текст */ >

Цвет фона, текста, размеры и положение подсказки также задаются в ::after . Заодно скрываем подсказку, делая её прозрачной через свойство opacity.

[data-tooltip]::after

Там же устанавливаем и время перехода с помощью свойства transition.

[data-tooltip]::after

Псевдоэлемент ::after является частью своего родителя, так что :hover начинает срабатывать при наведении не на саму строку, а на невидимую подсказку. Предотвратить взаимодействие курсора мыши с подсказкой можно с помощью свойства pointer-events со значением none .

[data-tooltip]::after

Чтобы подсказка отображалась, плавно становясь непрозрачной, добавим к :hover свойство opacity со значением 1.

[data-tooltip]:hover::after

Сюда же можно добавить и другие свойства, вроде left и top . Тогда подсказка будет не только становиться видимой, но и немного перемещаться. В примере 1 показан окончательный код для создания всплывающей подсказки при наведении на абзац.

Пример 1. Создание подсказки

См. также

• :focus на мобильных устройствах
• attr()
• pointer-events
• transition
• Анимация кнопок при наведении
• Анимация ссылок при наведении
• Атрибут title
• Виды ссылок
• Использование :hover
• Нормальное позиционирование
• Переходы
• Переходы и анимация
• Переходы с помощью :hover
• Подсветка строк и колонок таблицы
• Псевдокласс :hover
• Псевдоклассы в CSS
• Работа с типографикой
• Селекторы CSS
• Состояния кнопок
• Сочетание с псевдоклассами
• Типы ссылок

Как сделать всплывающую подсказку

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

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

Как сделать тултип

Создадим всплывающую подсказку для формы, в которой несколько полей для заполнения. Нам нужно разместить подсказку-уточнение к полю «Дети».

Для размещения тултипа создаём в HTML-файле с классом tooltip , который располагается в разметке формы:

Чтобы подсказка всплывала, курсор необходимо наводить на какую-либо область или кнопку. Добавим внутрь небольшую кнопку для наведения:

Иконка для кнопки добавлена в формате SVG, так как это небольшой графический элемент.

Для размещения текста подсказки, создадим ещё один :

     Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.  

Теперь переходим к стилизации тултипа, открываем CSS-файл.

Для начала напишем оформление для кнопки:

.tooltip-toggle

Также не забываем стилизовать саму иконку и добавить ей оформление при наведении курсора:

.tooltip-icon < width: 1px; height: 9px; color: #83b3d3; display: block; >.tooltip-toggle:hover .tooltip-icon

С помощью псевдоэлемента :hover мы меняем цвет иконки — в активном состоянии голубой оттенок становится немного темнее.

Затем задаём стиль текстовому блоку, описываем тип и размер шрифта, цвет фона и расположение текста:

.tooltip-text

Свойство border-radius делает уголки блока плавными, скругляет их.

Теперь нужно добавить стили всему контейнеру тултипа. Важно указать ширину и высоту с помощью свойств width и height , учесть отступы, добавить позиционирование:

.tooltip

После этого ставим текстовый блок на необходимое место по макету, чтобы он располагался по центру относительно кнопки. Добавляем позиционирование и свойство z-index , чтобы расположить текст выше других элементов.

.tooltip-text < font-family: "PT Sans", sans-serif; / Шрифт текста / background-color: #333333; / Цвет фона / color: #FFFFFF; / Цвет текста / font-size: 16px; / Размер текста / line-height: 20px; / Высота строки / font-weight: 400; / Жирность текста / text-transform: none; / Преобразование текста / padding: 20px 18px 18px 22px; / Отступы внутри элемента / border-radius: 10px; / Скругление углов / width: 256px; / Ширина элемента / position: absolute; / Позиционирование элемента / bottom: 100%; / Расположение элемента относительно нижнего края / left: 50%; / Расположение элемента относительно левого края / z-index: 1; / Настройка наложения элемента / transform: translateX(-50%); / Сдвиг элемента по горизонтали / display: none; / Скрываем элемент по умолчанию / >

Указываем свойство transform: translateX(-50%) для центрирования подсказки по горизонтали. С помощью свойства display со значением none скрываем блок, чтобы его не было видно постоянно.

И завершающим шагом добавляем появление текстового блока при наведении и фокусе на кнопку:

.tooltip-toggle:hover + .tooltip-text, .tooltip-toggle:focus + .tooltip-text

Несколько важных моментов

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

Чтобы скринридер смог прочитать текст тултипа, ему нужно подсказать назначение блока. Для этого мы связываем кнопку и текст в тултипе с помощью aria-labelledby .

Задаём плашке с текстом role=»tooltip» :

     Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.  

Затем добавляем кнопке атрибут aria-labelledby=»tooltip-label-date» , чтобы указать скринридеру какой контент зачитывать. И ставим id=»tooltip-label-date» на плашку, которая будет зачитываться:

     Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.  

Тултип доступен для чтения скринридером.

Материалы по теме

• Шаблон HTML-формы
• Как сделать кнопку в HTML
• Как сделать картинку ссылкой
• 3 способа валидации форм

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Вот как это работает:

Что всё это значит

Первые два свойства просто немного меняют вид ссылки.

Свойство color: maroon; меняет цвет текста в тегах на темно-красный.

Свойство text-decoration: none; убирает подчеркивание. Есть и другие варианты text-decoration — мы писали о них отдельно.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому работаем с CSS-анимацией. Так, свойство transform: scale(1.2); срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

Свойство transition: transform 0.3s ease; используется для создания плавного перехода между состояниями элемента. В нашем случае увеличение будет происходить в течение 0.3 секунд с использованием функции времени ease для более плавного начала и конца анимации.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

• 7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

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

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

• 29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 
Центрированный текст
 
 

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

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

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

• 28 июля 2023

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

Как перекрыть один элемент другим. CSS-свойство z-index

z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .

Синтаксис

.my-element

• 10 июля 2023

Как верстать и оформлять цитаты

�� Не используйте тег для других видов текста — перевода или шутки, так как это не семантично.

• 22 июня 2023

Компонент Всплывающая подсказка Tooltip

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

Руководство

Чтобы применить компонент Всплывающая подсказка , добавьте атрибут uk-tooltip к элементу. Вам также необходимо добавить в атрибут параметр title: TEXT , значение которого и будет представлять текст вашей подсказки. Всё просто!

Если title это единственный параметр в значении атрибута, вы можете использовать упрощённую запись uk-tooltip=»TEXT» .

Наведи на меня

Позиция

Выравнивание всплывающей подсказки

Добавьте один из следующих параметров в атрибут uk-tooltip , чтобы настроить выравнивание всплывающей подсказки.

Атрибут	Описание
pos: top	Выравнивает всплывающую подсказку сверху.
pos: top-left	Устанавливает подсказку с левого верхнего края.
pos: top-right	Устанавливает подсказку с правого верхнего края.
pos: bottom	Выравнивает всплывающую подсказку понизу.
pos: bottom-left	Устанавливает подсказку с нижнего левого края.
pos: bottom-right	Устанавливает подсказку с нижнего правого края.
pos: left	Выравнивает всплывающую подсказку слева.
pos: right	Выравнивает всплывающую подсказку справа.

• Результат
• Разметка

 
Top Top Left Top Right Bottom Bottom Left Bottom Right Left Right 

Задержка появления

Delay

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

Пример
Всплывающая подсказка с задержкой при появлении

Наведи на меня

Параметры для атрибута

При использовании компонента Tooltip к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Опция	Значение	По умолчанию	Описание
title	String	Текст подсказки.
pos	String	top	Позиция всплывающей подсказки.
offset	Number	false	Смещение всплывающей подсказки.
animation	String	uk-animation-scale-up	Разделенные пробелами имена используемых анимаций. Запятая отдельно для анимации.
duration	Number	100	Продолжительность анимации.
delay	Number	0	Задержка отображения.
cls	String	uk-active	Активный класс.

title является Primary опцией. Если title это единственный параметр в значении атрибута, то её ключ можно не использовать.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.tooltip(element, options); 

Пример: Стилизуем глобальный атрибут title элемента HTML abbr .

События

Следующие события будут инициированы для элементов компонента «Tooltip»:

Имя события	Описание
beforeshow	Срабатывает до отображения элемента. Может предотвратить отображение, вернув false .
show	Срабатывает после отображения элемента.
shown	Запускается после завершения анимации показанного элемента.
beforehide	Срабатывает до того, как элемент спрятан. Может предотвратить скрытие, вернув false .
hide	Срабатывает после запуска анимации скрытия элемента.
hidden	Срабатывает после того, как элемент спрятан.

Пример

UIkit.util.on(document, 'show', '.uk-tooltip.uk-active', function() < // делаем что-нибудь >); 

Методы

Для компонента «Tooltip» доступны следующие методы:

Show

UIkit.tooltip(element).show(); 

Hide

UIkit.tooltip(element).hide(); 

Доступность

Компонент Tooltip придерживается Tooltip Pattern и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.

• Элемент с подсказкой имеет идентификатор (ID).
• Всплывающая подсказка имеет роль tooltip и свойство aria-describedby , установленное на идентификатор элемента с всплывающей подсказкой.

Как добавить всплывающие подсказки на сайт

Узнайте, как добавить всплывающие подсказки на сайт с использованием HTML, CSS и JavaScript, чтобы улучшить пользовательский опыт!

Алексей Кодов
Автор статьи
1 июня 2023 в 13:26

Всплывающие подсказки – это удобный и эффективный способ предоставить дополнительную информацию или объяснения пользователю без перегрузки страницы. В данной статье мы рассмотрим, как добавить всплывающие подсказки на сайт с использованием HTML, CSS и JavaScript.

Шаг 1: Создание базовой HTML-структуры

Для начала создадим базовую структуру HTML, содержащую элемент, который будет иметь всплывающую подсказку. В данном примере используем абзац с классом tooltip :

Наведите курсор на этот текст, чтобы увидеть подсказкуВот и подсказка!
 

Здесь tooltiptext – это вложенный элемент, который будет содержать текст подсказки.

Шаг 2: Применение стилей CSS

Теперь применим стили CSS для создания внешнего вида всплывающей подсказки:

.tooltip < position: relative; display: inline-block; cursor: pointer; >.tooltiptext < visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; padding: 5px; border-radius: 5px; position: absolute; z-index: 1; bottom: 125%; /* Расположение подсказки относительно основного текста */ left: 50%; margin-left: -60px; /* Центрирование подсказки */ opacity: 0; /* Начальная прозрачность */ transition: opacity 0.3s; /* Плавное появление */ >.tooltip:hover .tooltiptext

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

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Шаг 3: Добавление JavaScript (опционально)

Если вы хотите добавить дополнительную функциональность или анимацию, можно использовать JavaScript. В данном примере добавим возможность показа подсказки по клику на элемент:

document.querySelector('.tooltip').addEventListener('click', function() < var tooltipText = this.querySelector('.tooltiptext'); tooltipText.style.visibility = tooltipText.style.visibility === 'visible' ? 'hidden' : 'visible'; >);

Здесь мы добавляем обработчик событий на элемент с классом tooltip , который при клике изменяет видимость вложенного элемента с подсказкой.

Теперь у вас есть основные знания о том, как создать всплывающие подсказки на сайте с использованием HTML, CSS и JavaScript. Эту технику можно адаптировать и улучшить в зависимости от ваших потребностей и предпочтений. Удачи в веб-разработке! ��