Тултип — подсказка, которая появляется по наведению или фокусу. Тултип закрывается, если отвести указатель, убрать фокус или проскроллить страницу.
Размер тултипа определяется содержимым, но ширина компонента не может быть более 300px.
Иногда удобнее, если текст в тултипе не переносится, а написан в одну строку. Например, при сравнении хеш-сумм, выводе адресов электронной почты или путей к файлам и папкам. Для подобных случаев не ограничивайте тултип по ширине.
Добавьте стрелку-указатель, когда можно запутаться, к чему относится подсказка.
В обычной ситуации тултип открывается сверху по центру. Положение возле триггерного объекта можно настроить вручную.
Выбирайте положение, в котором тултип будет не перекрывать контент, с которым пользователь будет взаимодействовать следом. Например, в вертикальном списке открывайте тултипы сборку, чтобы подсказка не мешала изучать соседний элемент по направлению чтения.
Если для показа тултипа не хватает места, он откроется с противоположной стороны. Атрибут kbqPlacementPriority помогает настроить запасные позиции, если нужно, чтобы они отличались от порядка по умолчанию.
При настройке kbqRelativeToPointer="true" тултип позиционируется относительно курсора. Часто это нужно для длинных строк (хеш-суммы, электронная почта, пути), чтобы подсказка появлялась прямо у курсора.
При наведении курсора на элемент тултип появляется с задержкой 0,4 секунды, а исчезает мгновенно.
При переключении фокуса или наведении на другой элемент с тултипом задержка работает по следующему принципу:
На экране всегда находится не больше одного тултипа: когда появляется новый, ранее открытый закрывается. Правило распространяется на тултипы, которые открываются по hover, focus, click или keydown, — в том числе на подсказки kbq-title и kbqEllipsisCenter.
Тултипы, которыми управляют программно (kbqTrigger="manual"), в этом правиле не участвуют: они не закрывают другие тултипы и не закрываются сами. Так работают, например, подсказки о результатах валидации.
Отключить поведение для отдельного тултипа можно через [kbqTooltipSingleInstance]="false", а для всего приложения — провайдером токена KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT:
providers: [{ provide: KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT, useValue: false }];
Если определенная кнопка или функция недоступна, тултип может объяснить это.
Для особых случаев можно изменить размеры тултипа и расположить в нем не только текст. Используйте стиль Contrast-fade, который похож на фон приложения, чтобы гарантировать контраст содержимого на фоне тултипа.