Тултипы что это

Что такое Tooltip (тултип) в Zero блоке?

Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом или изображением. Он может быть полезен, когда вы, например, рассказываете про какой-то сложный предмет и хотите на фото описать его составные части. Или вы продаете дома в строящемся поселке — можно нарисовать схему и отметить на ней каждый участок.

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

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

Использование тултипа для того, чтобы показать характеристики товара. Фото: SPERA.de

Тултип Tooltip

Тултип — это подсказка, которую пользователь открывает сам, кликом по элементу.

Обычно маленькую подсказку называют тултип, а большую хинт. Но в Контур.Гайдах всё наоборот. Так исторически сложилось. Зато проще запомнить: меньше слово — меньше контрол.

При общении с пользователями мы говорим не «тултип», а «всплывающая подсказка».

Когда использовать

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

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

Описание работы

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

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

Иконка предназначена для ссылок на руководство пользователя, и использовать ее для вызова тултипа с контекстной справкой нельзя.

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

Появление и скрытие тултипов

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

По клику на элемент
По наведению
По фокусу
Cовмещенный — по фокусу или наведению.

Появление по клику

В тултипе, который открывается по клику обязателен крестик для закрытия.

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

Появление по фокусу

В тултипах, которые открываются по фокусу или наведению, крестик не нужен.

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

Появление по наведению

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

Такие тултипы открываются и исчезают с задержкой в 100 миллисекунд.

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

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

Появление по фокусу или наведению

Это режим необходимый для работы тултипов валидации с предупреждениями или сообщением об ошибками. Такие тултипы открывются либо по фокусу на элементе либо когда на элемент навели курсор мыши.

Задержка на появление и исчезновение работает так же как у тултипов с появлением по наведению. Тултип не должен исчезать, если курсор переместился с элемента на сам тултип.

Размер и расположение

Тултип должен быть компактным, не перекрывать большую часть экрана и не выходить за его границы. Рекомендуемая ширина прямоугольной области тултипа — 250 px, максимальная — 500 px.

Тултип появляется справа от вызвавшего его элемента. Если справа не хватает места — то с других сторон от элемента, в порядке убывания приоритета: справа, сверху, слева, снизу — против часовой стрелки.

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

Указатель тултипа расположен напротив первого символа первой строки внутреннего текста. В результате текст на странице выровнен с текстом в тултипе:

Указатель тултипа всегда находится на расстоянии 2px от границ объекта, либо на расстоянии 2px от видимых границ, если границы объекта отличаются от видимых более чем на 16px. Как измерять отступы.

Тултип не должен менять свое положение при прокрутке страницы (например, открылся вверх, но при прокрутке оказался у края браузера и переместился вниз) — в какую сторону изначально открылся, там и остается до закрытия.

Тултипы или всплывающие подсказки в интерфейсе

Привет! Я Владимир Белов — продуктовый дизайнер в Group-IB. Веду телеграм-канал «Заметки дизайнера», где делюсь полезными ссылками, интересными продуктами для собственного анализа и статьями.

Вступление

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

Как это работает

Пользователь наводит мышкой на элемент для отображения всплывающей подсказки. В ней может написан текст, который поясняет то или иное действие, описание объекта или взаимодействие.

Когда необходимо использовать тултипы

Кнопка без текста

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

Где чаще всего используется:

Навигация
Текстовый редактор
Таблица
Формах

Горячие клавиши

Использование горячих клавишей ускоряет работу. Во всплывающую подсказку можно отобразить их для перехода или действия. С каждым разом пользователь запоминает часто используемые горячие клавиши, но, кроме этого, необходимо добавить раздел в Help Center со всем списком клавиш с пояснением. Не рекомендую использовать большое количество клавиш в интерфейсе на каждое действие, так как физически и когнитивно сложно запомнить их. На примере потрясающий продукт linear.app, и они на каждое окно, кнопку, поле добавили разные горячие клавиши с комбинациями.

Пояснение

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

Требования

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

Дополнительная информация

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

Инклюзивные компоненты: тултипы и тоглтипы

Тултипы (в этом переводе я буду транслитерировать слово «tooltip», их ещё часто называют подсказкой — прим. переводчика), которые мой друг Стив ласково называет «тутлипы» (tootlips), давно устоявшийся интерфейсный паттерн. Буквально это «подсказки для инструментов» в виде небольших пузырей с информацией, которые объясняют цель непонятных контролов и инструментов. Распространённый пример — контрол в виде таинственной иконки, смысл которой пользователь пока ещё не понимает.

Я хотел бы поговорить о том, когда и как эти пузыри должны появляться, так как столкнулся с большим количеством тултипов, которые, кажется, ведут себя немного по-разному. Я сделал вывод, что все эти реализации можно разделить на две самостоятельные группы: настоящие тултипы и паттерны, которые я с опаской называю «тоглтипы» (toggletips). Это слово придумал Стив в ходе пары исследований и экспериментов, которые не так давно провёл.

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

Атрибут title

Мы не можем говорить о тултипах без упоминания атрибута title : стандартный для HTML атрибут, предназначенный для пузырей с контекстной информацией. Блог Paciello Group не обходится без сарказма при описании вклада title в веб-интерфейсы:

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

Блог The Paciello Group.

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

Я большой сторонник использования стандартных HTML-элементов и атрибутов тогда, когда они доступны. Это наиболее эффективный и правильный с точки зрения производительности путь создания удобных веб-интерфейсов. Но, несмотря на то, что атрибут title поддерживается спецификацией, он действительно не подходит для своей цели.

Опять же, нам ещё предстоит определить эту цель. Для чего следует использовать тултипы? И даже если мы сможем сделать их такими, что с ними смогут взаимодействовать многие пользователи, нужны ли они вообще?

Случаи использования тултипов

Как мы уже установили, тултипы нужны для пояснений: они дают недостающую информацию. Но почему эта информация должна изначально отсутствовать? Как я писал в Inclusive Design Patterns, иконки могут упростить понимание интерфейса и помочь в его интернационализации. Существуя отдельно, они всегда могут запутать пользователя, потому что ничего не объясняют. Иконки не содержат информации для пользователей, которые не узнают или не могут расшифровать их.

В большинстве случаев вы должны просто размещать текст рядом с иконками. Как и видимые подписи к полям, которые я только что упомянул, текстовые лейблы являются самым простым способом добавления подписей к элементам. Также они автоматически доступны для скринридеров, если это настоящий текст (а не картинки с текстом).

Типичное объяснение, почему лейблов нет — это «нет места». И это, вероятно, так, если вы решили не использовать их в первую очередь. Если вы считаете их важными с самого начала, то найдёте способ это сделать.

Тултипы — последнее средство там, где пространство действительно стоит дорого — возможно, из-за огромного количества элементов управления, как на панели инструментов в редакторе WYSIWYG. Итак, как бы мы разработали их максимально инклюзивно?

Инклюзивные тултипы

Первое, что нужно сделать, — это сделать текст в тултипах доступным для вспомогательных технологий. Есть несколько способов привязки тултипа к контролу, и мы выбираем между ними исходя из его конкретной роли: это основной лейбл или он нужен для дополнительного пояснения?

У контрола для управления уведомлениями с тултипом «Уведомления» — это основной лейбл. А тултип «Просмотр уведомлений и управление настройками» является дополнительным.

Тултип как основной лейбл

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

  
 Уведомления

Обратите внимание, как устанавливается роль tooltip . С практической точки зрения она гарантирует, что aria-describedby точно работает там, где поддерживается. Как указывает Леони Уотсон, ARIA-лейблы и описания иногда работают не со всеми элементами, если вы не используете соответствующую роль. В этом случае самой важной является роль кнопки по умолчанию у элемента . Однако role=»tooltip» может расширить поддержку этого метода присвоения лейблов в некоторых программах.
Каким бы ни был текст в SVG, он не будет прочитан. aria-labelledby переопределяет текстовое содержимое кнопки на то, которое есть у лейбла.

Сейчас пример выше для скринридеров и их пользователей с точки зрения функциональности похож на простую подпись вроде этой:

Текст тултипа доступен при фокусе так же, как если бы на него навёл курсор зрячий пользователь. На самом деле, если бы весь текст появлялся только при наведении, то для зрячих пользователей интерфейс был бы в некоторой степени аналогичен интерфейсу пользователей скринридеров.

Примечание: лишние тултипы

Всё то время, что я работаю консультантом по дизайну интерфейсов, я вижу людей, которые добавляют атрибут title для ссылок с точно таким же текстом:

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

Добавляем счётчик уведомлений

Что, если кнопка показывает число непрочитанных сообщений, как это часто бывает (я имею в виду, конечно, Twitter)?

К счастью, атрибут aria-labelledby может содержать несколько id , разделённых пробелами.

Несмотря на то, что элемент с #notifications-count находится внутри , он не является сам по себе лейблом: он формирует первую часть лейбла в качестве первого id , указанного в значении aria-labelledby . Элемент расположен там, где он находится (в разметке), так что дизайнер может использовать относительное и абсолютное позиционирование, чтобы разместить элемент в нужном месте.

Сейчас для пользователей скринридеров лейбл — это «три уведомления». Такое решение лаконично и элемент работает одновременно как счётчик текущих уведомлений и как напоминание о том, что это контрол для управления уведомлениями.

Тултип как дополнительное описание

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

Некоторые интерактивные элементы могут иметь доступные описания, но все они нуждаются в доступных лейблах. Если мы используем aria-describedby для связи текста тултипа, нам нужен другой метод для добавления лейбла «Уведомления». В отличие от aria-labelledby мы можем добавить визуально скрытый для текстового содержимого кнопки рядом со счётчиком «3».

  

 
 
  Посмотреть и изменить настройки уведомлений

Класс visually-hidden аналогичен специальному CSS, который мы обсуждали ранее в Inclusive Components. Он скрывает визуально, при этом оставляя его доступным для объявления скринридерами.

.visually-hidden clip-path: inset(100%); 
clip: rect(1px, 1px, 1px, 1px); 
height: 1px; 
overflow: hidden; 
position: absolute; 
white-space: nowrap; 
width: 1px;
>

Предписанное поведение aria-describedby заключается в том, чтобы давать последнюю информацию об изменениях для контрола после объявления лейбла и роли. В этом случае будет объявлено следующее:

Кнопка, уведомления… Посмотреть и изменить настройки уведомлений.

Большинство скринридеров сделают паузу перед описанием.

Взаимодействие

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

[role="tooltip"] display: none;
>button:hover + [role="tooltip"], 
button:focus + [role="tooltip"] < 
display: block;
>

Однако, нам может понадобиться обернуть кнопку и тултип в один контейнер для позиционирования:

.button-and-tooltip position: relative;
>[role="tooltip"] position: absolute; 
/* требуются значения для 
left, top, right, bottom */
>

Взаимодействие с тач-устройствами

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

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

Есть другая вещь, которую вы можете попробовать. Можно было бы запретить для кнопки действие по умолчанию при первом нажатии, чтобы она просто показывала в этот момент тултип. Вы можете развить идею с «режимом обучения» дальше и показать тултипы в виде инлайнового текста для новичков, а затем упростить интерфейс и показывать только иконки освоившимся пользователям. К этому времени они должны понять, что означают иконки.

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

Инклюзивные тоглтипы

Тоглтипы (буквально «подсказка-переключатель» — прим. переводчика) похожи на тултипы в том, что они могут предоставить дополнительную информацию или что-то разъяснить. Но они отличаются тем, что их контрол сам по себе вспомогательный: тоглтипы существуют для того, чтобы показывать пузыри с информацией. Больше у них нет никакой цели.

Часто они имеют вид иконки с маленькой «i»:

Работая с тапами так же хорошо, как с мышкой и клавиатурой, тоглтипы появляются чаще при клике, чем при наведении или фокусе. Это значит, что aria-describedby больше не подходит. Почему? Потому что пользователь скринридера не может получить доступ к информации до того, как нажмёт на кнопку, так что это нажатие ничего не изменит. Технически, у них есть доступ к информации, которая делает контрол «доступным», но сам по себе он просто не имеет смысла. Другими словами, это больше проблема пользовательского опыта, чем доступности. Однако, это важная проблема.

Тоглтипы с интерактивными областями

Хитрость заключается в том, чтобы скринридеры объявляли информацию после события по клику. Это подходящий случай для использования интерактивных областей (live region). Мы можем добавить пустую интерактивную область и заполнить её событиями при инициализации тоглтипов. Это поможет одновременно отобразить пузырь c информацией и сделать объявление о тултипе.

Ниже разметка с пустой интерактивной областью. Обратите внимание на элемент .tooltip-container , который нужен для позиционирования. Для него должно быть задано свойство position: relative , которое позволяет абсолютно позиционировать рядом элемент .toggletip-bubble .

Также обратите внимание на атрибут type=»button» , запрещающий некоторым браузерам определять элемент как кнопку отправки данных, если он расположен внутри формы. Вот разметка с интерактивной областью, в которой происходят какие-то события (после того, как на кнопку с тоглтипом кликнули):

Дополнительный скрипт с комментариями и CodePen:

(function() // Получаем все кнопки-тоглтипы 
var toggletips = document.querySelectorAll('[data-toggletip-content]'); // Обходим их 
Array.prototype.forEach.call(toggletips, function (toggletip) // Получим сообщение из элемента с data-content 
var message = toggletip.getAttribute('data-toggletip-content'); // Получаем все элементы с интерактивными областями 
var liveRegion = toggletip.nextElementSibling; // Переключаем сообщение 
toggletip.addEventListener('click', function () liveRegion.innerHTML = ''; 
window.setTimeout(function() liveRegion.innerHTML = 
' message + 
''; 
>, 100); 
>); // Закрываем по клику на другую область 
document.addEventListener('click', function (e) if (toggletip !== e.target) liveRegion.innerHTML = ''; 
> 
>); // Убираем тоглтип по нажатию на Esc 
toggletip.addEventListener('keydown', function(e) if ((e.keyCode || e.which) === 27) 
liveRegion.innerHTML = ''; 
>); 
>);
>());

CSS-тесты и сообщения об ошибках

В Inclusive Design Patterns я писал про использование визуальной регрессии для того, чтобы подсветить ошибки в коде и добавить сообщения об ошибке в инструменте разработчика.

Ошибка, которую мы ранее отловили с помощью JavaScript, может быть обнаружена с помощью CSS-селектора [data-tooltip]:not(button) . Мы можем подсветить элементы с ошибками с помощью красного аутлайна и добавить сообщение о них с помощью ERROR :

[data-tooltip]:not(button) outline: red solid 0.5em; 
ERROR: Тоглтипы должны быть элементами .
>

ERROR , несмотря на невалидное значение, появится в инструментах разработчика, когда элемент будет изучен.

Заключение

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

Чеклист

Если у вас есть свободное пространство, не используйте тултипы или тоглтипы. Просто добавьте понятные лейблы и достаточное количество текста на страницу.
Если вы хотите использовать тултип, решите, следует ли указывать содержание подсказки в качестве лейбла или описания, и выберите соответствующие свойства ARIA.
Не полагайтесь на атрибуты title . Они не доступны для клавиатуры и не поддерживаются многими скринридерами.
Не описывайте тоглтип при помощи атрибута aria-describedby . Это делает кнопку с ним нефункциональной для пользователей скринридеров.
Не добавляйте в тултипы или тоглтипы интерактивный контент, например, кнопку закрытия или согласия, ссылки. Это работа для более сложных меню и диалоговых компонентов.

Спасибо @backwardok, которая заметила, что я создал повторяющийся лейбл, используя текстовый узел для описания того же элемента. Упс!