Определение
Tooltip — всплывающая подсказка, позволяющая получать контекстную помощь или информацию о конкретных компонентах при наведении курсора или фокусировке.
Popover — всплывающее окно, появляющееся при нажатии на элемент. Разница между компонентами popover и tooltip заключается в том, что popover может содержать гораздо больше контента, в том числе кнопки и ссылки.
Варианты и состояния
Popover имеет 2 типа:
- default — окно состоит по умолчанию из стандартного набора элементов: заголовок, подстрочник, текст, ссылка;
- custom — окно, состоящее из разных компонентов.
Основные правила
Tooltip:
- является неотъемлемой частью интерфейсных иконок;
- предоставляет полезную дополнительную информацию или разъяснения;
- отображается сразу при фокусе рядом с элементом, на который он указывает;
- закрывается плавным исчезновением, сразу как выбранный элемент теряет фокус;
- предназначен для кнопок, состоящих только из иконок или кнопок, связанных сочетанием клавиш;
- не используется для передачи важной информации, включая ошибки в формах, а также не может содержать ссылок или кнопок;
- приоритетное расположение подсказки tooltip — по центру над объектом;
- в редких случаях, когда объект фокуса расположен с краю экрана, допустимо расположение снизу, справа или слева от объекта;
- подсказка должна быть описательной, но короткой и лаконичной;
- чаще всего текст подсказки представляет из себя действие или название функции;
- максимальная ширина фона tooltip подсказки должна быть <120px.
Popover:
- должен всегда находиться рядом с кнопкой или другим элементом интерфейса, который их запускает;
- используется для второстепенной или менее важной информации и действий;
- всплывающие окна скрыты до тех пор, пока пользователи не нажмут на элемент запускающий отображение подсказки;
- в всплывающих окнах popover можно использовать как короткий текст, так и целые предложения (не более 120 символов);
- в popover возможно применение ссылок, иконок, заголовков, индикаторов статусов;
- должен запускаться по четко обозначенной кнопке или иконке;
- появляется справа от вызвавшего его элемента;
- если справа от вызвавшего его элемента не хватает пространства для подсказки, допустимо расположение с других сторон от элемента в порядке приоритета;
- не должен менять свое положение при прокрутке страницы;
- закрывается при клике на иконку Close (X) или за пределами всплывающего окна.
Взаимодействие
- Подсказка tooltip появляется и исчезает с небольшим скольжением (8px) направление которого зависит от расположения выбранного элемента.
- Popover появляется с задержкой в 400мс при клике на элемент, к которому он привязан.