Определение

Tooltip — всплывающая подсказка, позволяющая получать контекстную помощь или информацию о конкретных компонентах при наведении курсора или фокусировке.

Popover — всплывающее окно, появляющееся при нажатии на элемент. Разница между компонентами popover и tooltip заключается в том, что popover может содержать гораздо больше контента, в том числе кнопки и ссылки.

Варианты и состояния

Popover имеет 2 типа:

• default — окно состоит по умолчанию из стандартного набора элементов: заголовок, подстрочник, текст, ссылка;
• custom — окно, состоящее из разных компонентов.

Основные правила

Tooltip:

• является неотъемлемой частью интерфейсных иконок;
• предоставляет полезную дополнительную информацию или разъяснения;
• отображается сразу при фокусе рядом с элементом, на который он указывает;
• закрывается плавным исчезновением, сразу как выбранный элемент теряет фокус;
• предназначен для кнопок, состоящих только из иконок или кнопок, связанных сочетанием клавиш;
• не используется для передачи важной информации, включая ошибки в формах, а также не может содержать ссылок или кнопок;
• приоритетное расположение подсказки tooltip — по центру над объектом;
• в редких случаях, когда объект фокуса расположен с краю экрана, допустимо расположение снизу, справа или слева от объекта;
• подсказка должна быть описательной, но короткой и лаконичной;
• чаще всего текст подсказки представляет из себя действие или название функции;
• максимальная ширина фона tooltip подсказки должна быть <120px.

Popover:

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

Взаимодействие

• Подсказка tooltip появляется и исчезает с небольшим скольжением (8px) направление которого зависит от расположения выбранного элемента.
• Popover появляется с задержкой в 400мс при клике на элемент, к которому он привязан.