Стандарты применения тултипов
Тултип - небольшая всплывающая подсказка, которая появляется при наведении курсора или фокусировке на определенном элементе страницы. Полезен для предоставления краткой дополнительной информации об элементе интерфейса.
Тултипы чаще всего используются для следующих разъяснений:
Что обозначает та или иная кнопка / иконка / настройка в интерфейсе?
Что в обрезанном тексте?
Что ввести в этот инпут?
В Q.Palette есть три типа тултипов - tooltip (opens in a new tab), Overlay panel (opens in a new tab). Это два принципиально разных компонента, но все они считаются тултипами. Далее будет раскрыто, когда какие использовать:
Tooltip
Самый распространенный тип. Используется для коротких пояснений, обычно буквально в пару тройку слов. Появляется моментально и так же быстро скрывается.
Не вписывайте в такой тултип много контента, это считается плохой практикой.
| 🔴 Плохо | 🟢 Хорошо |
|---|---|
 |  |
Положение относительно элемента
При проектировании тултипа учитывайте, что он может появляться с одной из сторон компонента: сверху, справа, снизу или слева. Предпочтительно показывать тултип над элементом, это наиболее распространенная практика.
Однако есть варианты когда лучше располагать его с других сторон, для этого учитывайте следующие критерии:
- Влезает ли тултип по ширине относительно ближайшего края экрана
- Не перекрывает ли тултип важную для пользователя информацию (Если да то стоит подумать, нужен ли тут вообще тултип?)
| 🔴 Плохо | 🟢 Хорошо |
|---|---|
 |  |
Overlay Panel
Не такой распространенный, но полезный. Может использоваться как всплывающая подсказка с большим количеством текста, когда в обычный тултип все не помещается. Однако не стоит злоупотреблять и вписывать туда целые поэмы. Если Вам нужно вывести большое подробное пояснение правильно будет вставить главное из описания, а если этого не хватит - вставить ссылку на подробное описание.
Второе применение - вывод интерфейсных элементов привязанных к кнопке:
