Тултип Tooltip

Тултип — это подсказка, которая объясняет состояние контрола или даёт контекстную справку. Открывается по клику, фокусом на элемент или по наведению.

Если для пояснения требуется много текста, например больше 500 символов, то лучше написать статью и дать на неё ссылку в тултипе.

В тултипе может быть кнопка или ссылка, а в хинте нет.

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

Для ссылки, открывающей тултип со справкой или дополнительной информации в библиотеке интерфейсных иконок предусмотрено несколько вариантов:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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