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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1247 просмотров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Особенности дизайна всплывающих подсказок (Tooltip)

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

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

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

Подсказывать или не подсказывать, вот в чем вопрос

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

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

Тултипы в панеле инструментов текстового редактора.

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

Тултип, который содержит детальную информацию о файле.

• Редко используемые опции или опции, которые можно понять неправильно. Тултипы хорошо работают для опций, которые используются редко и о которых пользователь может забыть.

Приложение StackExchange. Не имея подсказок, можно подумать, что стрелки вверх/вниз выполняют функцию прокрутки.

Когда лучше избежать использования тултипов

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

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

Хороший дизайн подсказок

Хороший тултип имеет следующие свойства:

Просто найти

Проблемы с использованием тултипов, в основном, связаны с недостатком визуального “ключа” — нет визуального обозначения, что это тултип (изменение курсора, что означает, что данные объект содержит подсказку). Но пользователь сразу должен понимать, что объект содержит тултип, а не искать и экспериментировать. Вы можете улучшить этот процесс путем последовательного показа тултипов. Таким образом, вы увеличите предсказуемость. Если вы используете подсказки для некоторых объектов, вам следует использовать подсказки для всех подобных объектов, при помощи которых пользователи смогут получить дополнительную информацию. Иногда это сделать довольно сложно, потому что вам нужно убедиться, что ваши подсказки помогают а не говорят очевидные вещи.

Предоставляют необходимую информацию

Хороший тултип содержит краткую и полезную информацию:

• Окно попапа — это идеальный вариант тултипа с коротким предложением или небольшим текстовым фрагментом.

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

• Подсказка должна быть информативна. Она не должна быть очевидной или дублировать происходящее на экране. Если ваша подсказка является перефразированным заголовком объекта — она бесполезна.

Бесполезный тултип для пользователя

Содержит статическую информацию

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

Находятся на определенном месте

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

Вывод

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

Перевод статьи Nick Babich

ARIA&colon. Роль всплывающей подсказки — Специальные возможности

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

Всплывающие подсказки предоставляют контекстную информацию об элементе, когда этот элемент-владелец получает фокус или находится над ним, но в противном случае он не отображается на странице. Подсказка отображается автоматически после небольшой задержки; пользователь его не запрашивает. Хотя всплывающую подсказку можно разместить на любом содержимом, обычно это подсказки для инструментов или элементов управления, например предоставление дополнительного содержимого для значков с краткими метками (или вообще без меток, что недоступно!).

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

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

Подсказка не соответствует роли значка дополнительной информации «i», ⓘ. Подсказка напрямую связана с элементом-владельцем. ⓘ не «описывается» подробной информацией; инструмент или контроль.

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

На элементы с ролью tooltip следует ссылаться с помощью aria-describedby до или во время отображения всплывающей подсказки. Атрибут aria-describedby находится в элементе-владельце, а не во всплывающей подсказке.

Всплывающая подсказка не считается всплывающим окном с точки зрения свойства aria-haspopup элемента-владельца, поэтому мы использовали «текстовое всплывающее окно» во вводном определении.

Хотя всплывающая подсказка может появляться и исчезать, поскольку ее появление происходит автоматически и не контролируется пользователем намеренно, aria-expanded роль не поддерживается.

Доступное имя всплывающей подсказки может происходить из содержимого или из aria-label или aria-labeledby .

Связанные роли, состояния и свойства WAI-ARIA

• Элемент, который служит контейнером всплывающей подсказки, имеет набор role="tooltip" .
• Элемент, вызывающий всплывающую подсказку, ссылается на элемент всплывающей подсказки с aria-describedby .

Взаимодействие с клавиатурой

Escape

Закрывает всплывающую подсказку

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

Необходимые функции JavaScript

• Всплывающая подсказка отображается и исчезает при фокусе клавиатуры и удалении фокуса, а также по событиям мыши — наведению и удалению мыши.
• Подсказка никогда не получает фокус. Фокус остается на владеющем элементе.
• Всплывающую подсказку можно скрыть клавишей Escape
• Подсказка скрыта только с помощью селекторов JavaScript и CSS. Если JavaScript недоступен, отображается всплывающая подсказка.

 Пароль:


  
Правила пароля:
  <ул>
    
Минимум 8 символов.
    

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

 

Подсказку можно создать с помощью CSS. Измените имя класса с помощью JavaScript на класс, который скрывает всплывающую подсказку, если пользователь нажимает клавишу Escape .

 [роль="подсказка"],
.hidetooltip.hidetooltip.hidetooltip + [role="tooltip"] {
  видимость: скрытая;
  положение: абсолютное;
  верх: 2рем;
  слева: 2рем;
  фон: черный;
  белый цвет;
}
[ария-описана]: наведите курсор,
[ария-описана]: фокус {
  положение: родственник;
}
[ария-описана]: наведение + [роль = "подсказка"],
[aria-describedby]: focus + [role="tooltip"] {
  видимость: видимая;
}
 

Приведенный выше код скрывает всплывающую подсказку с помощью CSS в состоянии по умолчанию или если класс hidetooltip был добавлен с помощью JavaScript (когда пользователь нажимает Escape ), с высокой точностью, чтобы подсказка не отображалась. Когда элемент-владелец получает фокус, он позиционируется относительно, и всплывающая подсказка становится видимой.

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

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

• The dialog role
• CSS: :фокус псевдокласс
• Подсказки и переключатели Хейдона Пикеринга

Последнее изменение: 000Z»> 13 сентября 2022 г. , авторы MDN

Руководство по всплывающим подсказкам

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

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

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

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

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

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

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

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

В этой статье основное внимание будет уделено всплывающим подсказкам и их использованию на настольных сайтах.

Подсказка-Руководство по использованию

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

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

Не надо:

Веб-сайт Amtrak поместил требования к паролю во всплывающую подсказку (доступ к которой осуществляется при наведении указателя мыши). Этот тип информации необходим пользователю для успешного завершения процесса Создания учетной записи и поэтому всегда должен присутствовать на экране.

Сделать:

2.  Предоставьте краткое и полезное содержание во всплывающей подсказке.

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

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

Нельзя:

Сделать:

3. Поддержка и мыши и клавиатуры.

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

Нельзя:

Сделать:

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

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

Нельзя:

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

Сделать:

5. Постоянно используйте всплывающие подсказки на своем сайте.

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

Нельзя:

На веб-сайте Business Insider использовались всплывающие подсказки для 2 из 3 значков в меню навигации. (Примечание: на главной странице веб-сайта Business Insider у значка земного шара была всплывающая подсказка с надписью «Значок земного шара». Однако этот ярлык не был ни полезным, ни указывающим на его функциональность: выбор языка.) В целом мы не рекомендуем использовать значки без меток и сокрытие меток внутри всплывающих подсказок, но это нарушение становится еще более серьезным, когда метки всплывающих подсказок развернуты непоследовательно.

Сделать:

Дополнительные рекомендации

• Подсказки для немаркированных значков.

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

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

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

• Расположите всплывающие подсказки так, чтобы они не блокировали связанный контент.

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

Заключение

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

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

Подсказки · Начальная загрузка

Документация и примеры добавления настраиваемых всплывающих подсказок Bootstrap с помощью CSS и JavaScript с использованием CSS3 для анимации и атрибутов данных для локального хранения заголовков.

Обзор

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

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

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

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

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

 $(функция () {
  $('[data-toggle="tooltip"]').tooltip()
}) 

Примеры

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

Узкие штаны следующего уровня куфии вы, наверное, не слышали о них. Фотобудка с бородой из необработанного денима, высокой печатью, веганская сумка через плечо, Stumptown. Сейтан от фермы к столу, 8-битная американская одежда McSweeney’s Fixie из устойчивой лебеды имеет виниловое шамбре Terry Richardson. Бородатый тупиковый город, кардиганы банх ми ломо тандеркэтс. Биодизель с тофу Уильямсбург Марфа, очищающий веганский шамбре четырех локо Максуини. По-настоящему ироничный ремесленник, какой бы кейтар ни был, сценастер, от фермы до стола, Бэнкси Остин, твиттер, ручка, фриган, кредо, сырой деним, вирусный кофе одного происхождения.

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

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


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


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


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

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

 
  Подсказка с HTML
 

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

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

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

 $('#example').tooltip(options) 

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

 $('#example').tooltip({ border: 'window' }) 

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


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

Отключенные элементы

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

или , в идеале сфокусируемой на клавиатуре с помощью tabindex="0" , и переопределить события указателя на отключенный элемент.

 
  Кнопка отключена
 

Опции

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-, например data-animation="" .

Обратите внимание, что по соображениям безопасности параметры sanitize , sanitizeFn и whiteList не могут быть предоставлены с использованием атрибутов данных.

Имя	Тип	По умолчанию	Описание
анимация	логическое значение	правда	Применить переход затухания CSS к всплывающей подсказке
контейнер	строка | элемент | ложь	ложь	Добавляет всплывающую подсказку к определенному элементу. Пример: контейнер : 'тело' . Этот параметр особенно удобен тем, что позволяет расположить всплывающую подсказку в потоке документа рядом с активирующим элементом, что предотвратит всплывающую подсказку от триггерного элемента во время изменения размера окна.
задержка	номер | объект	0	Задержка отображения и скрытия всплывающей подсказки (мс) — не относится к ручному типу триггера Если указано число, применяется задержка как для скрытия, так и для отображения Структура объекта: задержка: { "показать": 500, "скрыть": 100}
HTML	логическое значение	ложь	Разрешить HTML во всплывающей подсказке. Если задано значение true, теги HTML в заголовке всплывающей подсказки будут отображаться во всплывающей подсказке. Если false, метод jQuery text будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
размещение	строка | функция	‘верхний’	Как расположить всплывающую подсказку — авто | топ | дно | слева | Правильно. При указании auto подсказка динамически переориентируется. Когда функция используется для определения размещения, она вызывается с узлом DOM всплывающей подсказки в качестве первого аргумента и узлом DOM триггерного элемента в качестве второго. Контекст this установлен на экземпляр всплывающей подсказки.
селектор	строка | ложь	ложь	Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM ( jQuery. на поддержке ). См. это и информативный пример.
шаблон	строка	' '	Базовый HTML для использования при создании всплывающей подсказки. Заголовок всплывающей подсказки будет вставлен в .tooltip-inner . .arrow станет стрелкой всплывающей подсказки. Самый внешний элемент оболочки должен иметь класс .tooltip и role="tooltip" .
наименование	строка | элемент | функция	''	Значение title по умолчанию, если атрибут title отсутствует. Если задана функция, она будет вызываться со своей этой ссылкой , установленной на элемент, к которому прикреплена всплывающая подсказка.
триггер	строка	'наведение фокуса'	Как срабатывает всплывающая подсказка - нажмите | парить | фокус | руководство. Вы можете передать несколько триггеров; разделяйте их пробелом. 'manual' указывает, что всплывающая подсказка будет запускаться программно с помощью методов .tooltip('show') , .tooltip('hide') и .tooltip('toggle') ; это значение нельзя комбинировать ни с каким другим триггером. 'hover' сам по себе приведет к всплывающим подсказкам, которые нельзя активировать с помощью клавиатуры, и их следует использовать только в том случае, если существуют альтернативные методы передачи той же информации для пользователей клавиатуры.
смещение	номер | строка | функция	0	Смещение всплывающей подсказки относительно цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с той же структурой. Узел триггерного элемента DOM передается в качестве второго аргумента. Для получения дополнительной информации см. документацию по смещению Popper.js.
резервное размещение	строка | массив	'флип'	Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см. Документы о поведении Popper.js
граница	строка | элемент	'родительский прокрутки'	Граница ограничения переполнения всплывающей подсказки. Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылка HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации по предотвращению переполнения Popper.js.
дезинфекция	логическое значение	правда	Включить или отключить очистку. При активации «шаблон» и «заголовок» параметры будут очищены.
белый список	объект	Значение по умолчанию	Объект, содержащий разрешенные атрибуты и теги
санитарная обработкаFn	ноль | функция	ноль	Здесь вы можете указать собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать выделенную библиотеку для выполнения очистки.

Методы

Асинхронные методы и переходы

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

Дополнительные сведения см. в нашей документации по JavaScript.

$(). Подсказка (параметры)

Добавляет обработчик всплывающей подсказки к коллекции элементов.

.тултип('показать')

Показывает всплывающую подсказку элемента. Возвращает вызывающему объекту до того, как всплывающая подсказка действительно была показана (т. е. до появления события visible.bs.tooltip ). Это считается «ручным» срабатыванием всплывающей подсказки. Подсказки с заголовками нулевой длины никогда не отображаются.

 $('#element').tooltip('show') 

.tooltip('hide')

Скрывает всплывающую подсказку элемента. Возвращает вызывающему объекту до того, как всплывающая подсказка будет фактически скрыта (т. е. до того, как произойдет событие hidden.bs.tooltip ). Это считается «ручным» срабатыванием всплывающей подсказки.

 $('#element').tooltip('скрыть') 

.tooltip('переключить')

Переключает всплывающую подсказку элемента. Возвращает вызывающему объекту до того, как всплывающая подсказка действительно была показана или скрыта (т. е. до того, как произойдет событие visible.bs.tooltip или hidden.bs.tooltip ). Это считается «ручным» срабатыванием всплывающей подсказки.

 $('#element').tooltip('toggle') 

.tooltip('dispose')

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

 $('#element').tooltip('dispose') 

. tooltip('enable')

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

 $('#element').tooltip('enable') 

.tooltip('disable')

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

 $('#element').tooltip('disable') 

.tooltip('toggleEnabled')

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

 $('#element').tooltip('toggleEnabled') 

.tooltip('update')

Обновляет положение всплывающей подсказки элемента.

 $('#element').tooltip('update') 

События

Тип события	Описание
show.bs.tooltip	Это событие возникает немедленно при вызове метода экземпляра show . No related posts. alexxlab Автор записи Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт