Tooltip

<sf-tooltip> рисует поверхность подсказки: короткий текст, необязательное пояснение и стрелку. Элемент всегда виден и сам не следит за триггером — его показывает и располагает владелец, например Range Slider. Подсказку, которая открывается при наведении и фокусе на кнопке или поле, собирайте на классах компонента Подсказка.

Пример

<div class="flex flex-wrap gap-4 items-cross-center">
  <sf-tooltip appearance="dark" arrow="bottom-center" text="Сохранить изменения" supporting-text="Ctrl + S"></sf-tooltip>
  <sf-tooltip appearance="dark" size="1/2" arrow="top-center" text="Копировать ссылку"></sf-tooltip>
</div>

Применение

Текст

text — основной текст, supporting-text — пояснение или сочетание клавиш. Держите подсказку короткой: одно-два коротких предложения. Слоты text и supporting-text заменяют строки разметкой, слот content — всё содержимое, слот tail — стрелку.

Вид, размер и стрелка

appearance выбирает вид: dark — контрастная тёмная поверхность, заметная на любом фоне; light (по умолчанию) — светлая поверхность без границы, она читается на затемнённом или цветном фоне и теряется на светлом. size — ступень 1/3, 1/2, 1, 2 или 3; берите ступень элемента, к которому относится подсказка.

arrow ставит стрелку и тем самым показывает, с какой стороны стоит элемент: bottom-center, bottom-inline-start, bottom-inline-end — внизу поверхности, top-center — вверху, inline-start и inline-end — у начала или конца строки. none (по умолчанию) убирает стрелку.

Подсказка у триггера

Связка data-tooltip с <sf-tooltip> не работает: контроллер подсказки показывает и располагает сам элемент <sf-tooltip>, у которого нет собственного блока, и поверхность остаётся под триггером шириной в него. Для подсказки при наведении и фокусе пишите поверхность классами sf-tooltip, как на странице Подсказка.

<span class="sf-tooltip-anchor">
  <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"
    data-tooltip="save-tooltip" aria-describedby="save-tooltip">
    <span class="sf-button-text-container">Сохранить</span>
  </button>
  <span id="save-tooltip" class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-bottom-center" hidden>
    <span class="sf-tooltip-content flex flex-col">
      <span class="sf-tooltip-wrap flex flex-col">
        <span class="sf-tooltip-text">Сохранить изменения</span>
      </span>
      <span class="sf-tooltip-tail" aria-hidden="true"></span>
    </span>
  </span>
</span>

Доступность

• Подсказка дополняет имя элемента, а не заменяет его: у кнопки-иконки имя задаёт aria-label, подсказка — пояснение через aria-describedby.
• Владелец, который показывает поверхность, отвечает за связь с элементом: role="tooltip" на поверхности и её id в aria-describedby элемента.
• Поверхность не получает фокус. Не кладите в неё ссылки, кнопки и поля: интерактивному содержимому нужен Popover или диалог.
• Не задавайте триггеру aria-expanded и aria-haspopup: подсказка не управляемое всплывающее окно.
• Стрелка декоративна и скрыта от экранного диктора.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• template — string, по умолчанию default. Имя шаблона.
• appearance — string, по умолчанию light, значения: light, dark. Вид подсказки: светлый текст на тёмной поверхности или наоборот.
• size — string, по умолчанию 1, значения: 1/3, 1/2, 1, 2, 3. Шкала типографики и отступов Framework.
• arrow — string, по умолчанию none, значения: none, top-center, bottom-center, inline-start, inline-end, bottom-inline-start, bottom-inline-end. Логическое расположение хвоста.
• text — string, по умолчанию пусто. Короткое основное описание.
• supporting-text — string, по умолчанию пусто. Необязательное дополнительное описание.
• root-class — string, по умолчанию пусто. Утилитарные классы Framework для видимого корня поверхности.

Прежние имена:

Методы

Публичных методов нет.

События

Своих событий нет; общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

Доступность

• Роль: tooltip, если связан обычным контроллером data-tooltip.
• Доступное имя: внутренний.
• Клавиши: Escape закрывает открытую связанную подсказку, не уводя фокус с элемента.
• Фокус: Поверхность никогда не получает фокус. Фокусом и aria-describedby владеет связанный нативный триггер.

Минимальная разметка

<sf-tooltip text="Hint"></sf-tooltip>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/tooltip
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-tooltip

См. также

• Подсказка — подсказка при наведении и фокусе на классах.
• Popover — всплывающая панель с интерактивным содержимым.