Хинт Hint

Хинт — это подсказка, появляющаяся при наведении на элемент.

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

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

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

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

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

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

Исчезает хинт мгновенно, как только курсор «уйдет» с элемента. Хинт исчезает и в том случае, если после его появления прокрутить страницу.

Хинт должен полностью заменить в интерфейсе стандартные хинты браузера, вместо системных подсказок из тегов alt и title.

Текст

Текст хинта — максимально короткий, в идеале не больше 70 символов. Не может содержать инструкцию.

Не дублируйте название объекта в хинте.

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

Максимальная ширина прямоугольной области 200 px.

Хинт появляется сверху от элемента к которому относится. Если сверху нет места — открывается вниз. Можно указать приоритет — сверху или снизу, и даже слева или справа.

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