Тултип это: Тултип — Компоненты — Контур.Гайды

Тултипы (tooltips). Что это такое и как их проектировать / Хабр

Тултип, от английского tooltip. Это такая короткая всплывающая подсказка, появляющаяся при наведении курсора на элемент. Или при фокусировании на элементе с помощью клавиатуры. Или при длительном разглядывании элемента, если вы в шлеме виртуальной реальности с трекингом глаз.

Привет, меня зовут Егор Камелев. Я занимаюсь проектированием интерфейсов с 2006 года. Сегодня хочу поделиться чек-листом вопросов, связанных с проектированием тултипов.

Тултипы чаще всего используются для следующих разъсянений:

Что обозначает та или иная иконка в интерфейсе?

Что же там, в обрезанном тексте?

Что это за непонятное число?

В приведённых примерах вряд ли удалось бы отказаться от тултипов без вреда для интерфейса. И это первый вопрос, которым я задаюсь во время проектирования: «Можно ли здесь обойтись без тултипа и не навредить пользователям?» Если можно, то лучше всё-таки не прятать важную информацию под тултип, а размещать её в виде текста рядом с нужным элементом.

Следующий вопрос звучит так: «Здесь точно нужен тултип, а не что-нибудь другое?» Возможно, подойдёт один из похожих элементов: поп-овер или модальное окно.

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

Модальные окна перекрывают собой весь остальной интерфейс и не позволяют взаимодействовать с ним до тех пор, пока не будут закрыты. Хорошо подходят в сценариях, когда для работы с элементом необходимо заполучить 100% внимания пользователя.

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

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

Например, важно ли пользователям видеть, что находится за тултипом, в момент его отображения? Если важно, то придётся размещать тултип рядом с элементом, а не поверх него.

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

Если не используется фреймворк (а иногда даже когда фреймворк используется), то для передачи задачи в разработку приходится описывать всю необходимую логику, отвечающую на вопросы:

• Через сколько миллисекунд после наведения тултип появляется?

• Через сколько исчезает после того, как с него снят фокус?

• Если два элемента стоят рядом и пользователь сместил фокус с одного на другой, как должны вести себя тултипы (например, тултипы меняются мгновенно, игнорируя правило задержки)?

• Нужна ли анимация плавного появления и исчезания? Если нужна, то какая и сколько она должна занимать по времени?

• Где должен появиться тултип относительно курсора мыши или элемента, на который навёлся пользователь?

• Где должен появиться тултип, если элемент, на который навёлся пользователь, находится слишком близко к краю экрана? Если использовать решение со стрелочками, торчащими из тултипа, то задача по проектированию и описанию логики размещения элементов серьёзно усложняется;

• Какая максимальная длина текста может быть в тултипе?

• Можно ли отображать тултип с пустым контентом (в Бутстрапе по умолчанию нельзя)?

• Можно ли показывать тултипы для скрытых элементов (в Бутстрапе по умолчанию нельзя)?

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

На этом UX-составляющая вопросов проектировщика заканчивается и можно приступать к UI. Здесь будут свои вопросы.

• Каким цветом отделить тултип от остального интерфейса (в Бутстрапе по умолчанию это белый текст на чёрном фоне)?

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

• Не нагородил ли я нового стиля там, где можно было использовать существующий?

• Какой будет максимальная ширина контента до переноса строки и почему?

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

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

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

Наконец, проектировщик может помочь верстальщику, написав в сопроводительной документации пару строк о требованиях к доступности интерфейса (accessibility). Если среди целевой аудитории проекта есть слабовидящие люди, использующие скрин-ридеры, то тултипы должны быть свёрстаны с соблюдением двух принципов:

• Скрин-ридерам доступен контент тултипов и они в состоянии его воспроизвести;

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

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

Тултипы (tooltips). Что это такое и как их проектировать — Дизайн на vc.ru

Тултип, от английского tooltip. Это такая короткая всплывающая подсказка, появляющаяся при наведении курсора на элемент. Или при фокусировании на элементе с помощью клавиатуры. Или при длительном разглядывании элемента, если вы в шлеме виртуальной реальности с трекингом глаз.

2148 просмотров

Привет, меня зовут Егор Камелев. Я занимаюсь проектированием интерфейсов с 2006 года. Сегодня хочу поделиться чек-листом вопросов, связанных с проектированием тултипов.

Тултипы чаще всего используются для следующих разъсянений:

Что обозначает та или иная иконка в интерфейсе?

Например, в WYSIWYG-панелях текстовых редакторов

Что же там, в обрезанном тексте?

Если название ролика на YouTube не умещается в две строки, то оно отображается в тултипе

Что это за непонятное число?

Пример из интерфейса Яндекс.Метрики

В приведённых примерах вряд ли удалось бы отказаться от тултипов без вреда для интерфейса. И это первый вопрос, которым я задаюсь во время проектирования: «Можно ли здесь обойтись без тултипа и не навредить пользователям?» Если можно, то лучше всё-таки не прятать важную информацию под тултип, а размещать её в виде текста рядом с нужным элементом.

Следующий вопрос звучит так: «Здесь точно нужен тултип, а не что-нибудь другое?» Возможно, подойдёт один из похожих элементов: поп-овер или модальное окно.

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

На Яндекс.маркете такие подсказки рассказывают о свойствах товаров тем, кто не очень хорошо в них разбирается

Модальные окна перекрывают собой весь остальной интерфейс и не позволяют взаимодействовать с ним до тех пор, пока не будут закрыты. Хорошо подходят в сценариях, когда для работы с элементом необходимо заполучить 100% внимания пользователя.

Модальное окно с перечнем тарифов в конструкторе посадочных страниц lp151.com

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

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

Например, важно ли пользователям видеть, что находится за тултипом, в момент его отображения? Если важно, то придётся размещать тултип рядом с элементом, а не поверх него.

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

Если не используется фреймворк (а иногда даже когда фреймворк используется), то для передачи задачи в разработку приходится описывать всю необходимую логику, отвечающую на вопросы:

• Через сколько миллисекунд после наведения тултип появляется?

• Через сколько исчезает после того, как с него снят фокус?

• Если два элемента стоят рядом и пользователь сместил фокус с одного на другой, как должны вести себя тултипы (например, тултипы меняются мгновенно, игнорируя правило задержки)?

• Нужна ли анимация плавного появления и исчезания? Если нужна, то какая и сколько она должна занимать по времени?

• Где должен появиться тултип относительно курсора мыши или элемента, на который навёлся пользователь?

• Где должен появиться тултип, если элемент, на который навёлся пользователь, находится слишком близко к краю экрана? Если использовать решение со стрелочками, торчащими из тултипа, то задача по проектированию и описанию логики размещения элементов серьёзно усложняется;

• Какая максимальная длина текста может быть в тултипе?

• Можно ли отображать тултип с пустым контентом (в Бутстрапе по умолчанию нельзя)?

• Можно ли показывать тултипы для скрытых элементов (в Бутстрапе по умолчанию нельзя)?

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

На этом UX-составляющая вопросов проектировщика заканчивается и можно приступать к UI. Здесь будут свои вопросы.

• Каким цветом отделить тултип от остального интерфейса (в Бутстрапе по умолчанию это белый текст на чёрном фоне)?

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

• Не нагородил ли я нового стиля там, где можно было использовать существующий?

• Какой будет максимальная ширина контента до переноса строки и почему?

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

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

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

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

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

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

Наконец, проектировщик может помочь верстальщику, написав в сопроводительной документации пару строк о требованиях к доступности интерфейса (accessibility). Если среди целевой аудитории проекта есть слабовидящие люди, использующие скрин-ридеры, то тултипы должны быть свёрстаны с соблюдением двух принципов:

• Скрин-ридерам доступен контент тултипов и они в состоянии его воспроизвести;

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

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

Tooltips · Bootstrap v5.0

Обзор

Что нужно знать при использовании плагина всплывающих подсказок:

• Подсказки полагаются на стороннюю библиотеку Popper для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper, чтобы всплывающие подсказки работали!
• Всплывающие подсказки добавляются по соображениям производительности, поэтому вы должны инициализировать их самостоятельно .
• Никогда не отображаются всплывающие подсказки с заголовками нулевой длины.
• Укажите container: 'body' , чтобы избежать проблем с рендерингом в более сложных компонентах (таких как наши группы ввода, группы кнопок и т. д.).
• Не работают всплывающие подсказки для скрытых элементов.
• Подсказки для элементов .disabled или disabled должны активироваться на элементе-оболочке.
• При запуске из гиперссылок, охватывающих несколько строк, всплывающие подсказки будут располагаться по центру. Используйте белое пространство: nowrap; на , чтобы избежать такого поведения.
• Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из модели DOM.
• Подсказки могут быть активированы благодаря элементу внутри теневого DOM.

По умолчанию этот компонент использует встроенное средство очистки содержимого, которое удаляет любые элементы HTML, которые явно не разрешены. Дополнительные сведения см. в разделе «дезинфицирующее средство» в нашей документации по JavaScript.

Все понял? Отлично, давайте посмотрим, как они работают, на нескольких примерах.

Пример: Включить всплывающие подсказки везде

Один из способов инициализировать все всплывающие подсказки на странице — выбрать их по атрибуту data-bs-toggle :

 var tooltipTriggerList = [].slice.call(document.querySelectorAll( '[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map (функция (tooltipTriggerEl) {
  вернуть новый bootstrap.Tooltip(tooltipTriggerEl)
})
 

Примеры

Наведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки:

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

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

 
  Подсказка вверху


  Подсказка справа


  Подсказка внизу


  Подсказка слева

 

И с добавлением пользовательского HTML:

 
  Подсказка с HTML

 

С SVG:

Sass

Переменные

 $tooltip-font-size: $font-size-sm;
$всплывающая подсказка-максимальная ширина: 200px;
$цвет всплывающей подсказки: $белый;
$tooltip-bg: $черный;
$всплывающая подсказка-граница-радиус: $граница-радиус;
$ всплывающая подсказка-непрозрачность: . 9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$всплывающая подсказка: 0;
$tooltip-стрелка-ширина: .8rem;
$tooltip-стрелка-высота: .4rem;
$tooltip-arrow-color: $tooltip-bg;
 

Использование

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

Запустить всплывающую подсказку через JavaScript:

 var exampleEl = document.getElementById('example')
var tooltip = новый bootstrap.Tooltip(exampleEl, options)
 

Переполнение

 var exampleEl = document.getElementById('example')
var tooltip = новый bootstrap.Tooltip (exampleEl, {
  граница: document.body // или document.querySelector('#boundary')
})
 

 
Наведите курсор на меня


  <дел>
  <дел>
    Какой-то текст всплывающей подсказки!