Тултип Tooltip
Тултип — это подсказка, которую пользователь открывает сам, кликом по элементу.
Обычно маленькую подсказку называют тултип, а большую хинт. Но в Контур.Гайдах всё наоборот. Так исторически сложилось. Зато проще запомнить: меньше слово — меньше контрол.
При общении с пользователями мы говорим не «тултип», а «всплывающая подсказка».
Когда использовать
Тултип используется для коротких поясняющих текстов, если необходимо дать разъяснение к деталям интерфейса, упомянутой информации или помочь с заполнением полей. Если эти подробности не нужны постоянно, но могут помочь пользователю в момент когда он испытывает трудности.
Если пояснение содержит много информации, то полезнее разместить его в виде статьи на отдельную страницу, а в тултип добавить ссылку.
Описание работы
Тултип может быть вызван кликом по ссылке или иконке для показа справки или дополнительной информации, а наведением на элемент формы или фокусом на нем — для показа сообщения об ошибке.
- — стандартный вариант для контекстной справки;
- — менее заметный аналог предыдущей иконки;
- — если в тултипе не помощь, а скорее дополнительная информация.
Иконка предназначена для ссылок на руководство пользователя, и использовать ее для вызова тултипа с контекстной справкой нельзя.
Тултип может содержать текст, изображение, ссылки. Содержание тултипа выровнено по левой стороне.
Появление и скрытие тултипов
Тултип может быть открыт одним из 4 способов:
- По клику на элемент
- По наведению
- По фокусу
- Cовмещенный — по фокусу или наведению.
Появление по клику
В тултипе, который открывается по клику обязателен крестик для закрытия.
Такой тултип закрывается любым кликом за его пределами и не блокирует активные элементы на странице. Например, если пользователь кликнул по ссылке вне тултипа, он закрывается, и происходит переход по ссылке.
Появление по фокусу
В тултипах, которые открываются по фокусу или наведению, крестик не нужен.
Тултип, который открывается по фокусу на элементе, закрывается, когда элемент теряет фокус.
Появление по наведению
Тултип, который открывается по наведению на элемент интерфейса, не должен исчезать, если курсор переместился с элемента на сам тултип.
Такие тултипы открываются и исчезают с задержкой в 100 миллисекунд.
Задержка на появление нужна, чтобы при движении курсора по странице не было случайного моргания тултипов.
Задержка на исчезновение нужна, чтобы пользователь успел перевести курсор на тултип и взаимодействовать с содержимым тултипа — например выделить текст или нажать на ссылку.
Появление по фокусу или наведению
Это режим необходимый для работы тултипов валидации с предупреждениями или сообщением об ошибками. Такие тултипы открывются либо по фокусу на элементе либо когда на элемент навели курсор мыши.
Задержка на появление и исчезновение работает так же как у тултипов с появлением по наведению. Тултип не должен исчезать, если курсор переместился с элемента на сам тултип.
Размер и расположение
Тултип должен быть компактным, не перекрывать большую часть экрана и не выходить за его границы. Рекомендуемая ширина прямоугольной области тултипа — 250 px, максимальная — 500 px.
Тултип появляется справа от вызвавшего его элемента. Если справа не хватает места — то с других сторон от элемента, в порядке убывания приоритета: справа, сверху, слева, снизу — против часовой стрелки.
Если тултип может закрыть важную для пользователя информацию или другие контролы, это направление можно запретить для тултипа.
Указатель тултипа расположен напротив первого символа первой строки внутреннего текста. В результате текст на странице выровнен с текстом в тултипе:
Указатель тултипа всегда находится на расстоянии 2px от границ объекта, либо на расстоянии 2px от видимых границ, если границы объекта отличаются от видимых более чем на 16px. Как измерять отступы.
Тултип не должен менять свое положение при прокрутке страницы (например, открылся вверх, но при прокрутке оказался у края браузера и переместился вниз) — в какую сторону изначально открылся, там и остается до закрытия.
Всплывающая подсказка (Tooltip)
Всплывающая подсказка позволяет прокомментировать или проиллюстрировать какое-то слово в текстовом блоке.
1. Выделите слово или фрагмент текста, который вы хотите прокомментировать.
2. В появившемся контекстном меню выберите пункт «Ссылка» и назначьте ссылку. Она может начинаться с http(s):// и вести на внешний ресурс, либо можно поставить решетку и любое слово: #anyword.
3. Откройте Библиотеку блоков → добавьте блок Т198 из категории «Другое».
Nikola Tesla
Nikola Tesla was a Serbian American inventor, electrical engineer, mechanical engineer, physicist, and futurist best known for his contributions to the design of the modern alternating current (AC) electricity supply system.
4. Откройте меню «Контент блока» и в поле «Ссылка для привязки» укажите ссылку точно так же, как вы указали ее к слову или фрагменту текста.
Всплывающая подсказка
Всплывающей подсказкой называется блок с текстом, который появляется при наведении на элемент веб-страницы (рис. 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
- Состояния кнопок
- Сочетание с псевдоклассами
- Типы ссылок
Как называется сообщение, появляющееся/изчезающее под курсором при наведении/отведении на ссылку?
Такое сообщение получило название «ToolTip» или «всплывающая подсказка».
На её текст можно повлиять путём редактирования атрибута title у соотв. ссылки.
Подобные тултип-подсказки часто добавляют как декоративный дизайнерский элемент,
который можно оформить через CSS и «повесить» появлние подсказки через JavaScript.
Остальные ответы
Называется «всплывающая подсказка»