Хинт Hint

Хинт — это подсказка, которая объясняет контрол, иконку и добавляет контекста. Появляется только при наведении и содержит только текст.

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

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

Неправильно

Правильно

Неправильно

Правильно

Неправильно

Правильно

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

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

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

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

Текст

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

Если в хинт нужно вывести название сущности и оно длинное, не переживайте об ограничении в 70 символов и выводите

Хинт не может содержать инструкцию.

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

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

Хинт отступает от контрола на один модуль, то есть 8 px.

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

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