Подсказка «?»

<sf-help-mark> — знак «?» рядом с подписью, который открывает короткое пояснение. Открывается только нажатием — мышью, пальцем, Enter или пробелом; наведение его не открывает. Второе нажатие, Escape или щелчок мимо закрывают пояснение.

Пример

<div class="flex flex-col gap-3">
  <div class="flex items-center gap-1">
    <span class="text-1">Прерываемая ВМ</span>
    <sf-help-mark label="Подробнее: прерываемая ВМ" title="Прерываемая ВМ" text="Машина дешевле обычной, но может быть остановлена в любой момент и работает не дольше суток. Подходит для пакетных задач."></sf-help-mark>
  </div>
  <div class="flex items-center gap-1">
    <span class="text-1">Уровень доступа</span>
    <sf-help-mark label="Подробнее: уровни доступа">
      <div slot="content">Права задаются ролями. Подробнее — в <a class="sf-link" href="#help-mark-access">руководстве по доступу</a>.</div>
    </sf-help-mark>
  </div>
</div>

Применение

Когда подсказка «?», а когда всплывающая подсказка

Содержание

• text — пояснение; вместо него можно передать слот content со ссылками или списком.
• title — короткая строка заголовка над пояснением.
• size — 1/3, 1/2 (по умолчанию) или 1. Знак не добавляет высоты ни строке текста, ни строке подписи поля: кнопка стоит посередине строки и выходит за неё, не раздвигая. У подписи поля удобен 1/3.
• placement — auto (по умолчанию: снизу, с переворотом, если места нет), top, bottom, start, end.

Ширина пояснения — не больше 20rem. При открытии и закрытии приходят события sf-help-mark-open и sf-help-mark-close.

<label for="solution-code">Код решения</label>
<sf-help-mark label="Подробнее: код решения" title="Код решения" size="1/3"
              text="Уникальное имя модуля латиницей, например simai.billing."></sf-help-mark>
<input id="solution-code" name="code">

Знак стоит рядом с подписью, а не внутри <label>: внутри подписи он стал бы её элементом управления, и нажатие на текст подписи открывало бы пояснение вместо перехода в поле. Полная разметка поля со знаком — в Текстовые поля → Поле с пояснением к подписи.

Доступность

• label — доступное имя кнопки, по умолчанию «Подробнее». Называйте, о чём пояснение: «Подробнее: код решения». Имя стоит только в aria-label: у кнопки нет title, поэтому экранный диктор не повторяет имя описанием.
• Кнопка сообщает aria-expanded; при открытии текст пояснения вежливо объявляется для чтения с экрана, фокус остаётся на кнопке.
• Если в пояснении есть ссылка или другой элемент управления, Tab с кнопки переходит в пояснение, а пояснение закрывается, когда фокус уходит и с кнопки, и из него. Без таких элементов Tab идёт дальше, а пояснение остаётся открытым до Escape, повторного нажатия или щелчка мимо.

Справочник API

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

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

Атрибуты

• text — string, по умолчанию пусто. Пояснение; вместо него слот content принимает ссылки или списки.
• title — string, по умолчанию пусто.
• label — string, по умолчанию пусто. Доступное имя кнопки; по умолчанию «Подробнее». Лучше назвать, о чём пояснение («Подробнее: код решения»).
• size — string, по умолчанию 1/2, значения: 1/3, 1/2, 1.
• placement — string, по умолчанию auto, значения: auto, top, bottom, start, end.
• root-class — string, по умолчанию пусто.
• template — string, по умолчанию default.

Методы

• open() — возвращает object. Открывает пояснение.
• close() — возвращает object. Закрывает пояснение.

События

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

• sf-help-mark-open — detail: { }. Пояснение открыто.
• sf-help-mark-close — detail: { }. Пояснение закрыто.

Доступность

• Роль: кнопка (button).
• Доступное имя: рекомендуется.
• Клавиши: Enter, Space, Escape, Tab.
• Фокус: Кнопка с aria-expanded и aria-controls; нажатие открывает пояснение, и оно вежливо объявляется. Escape, повторное нажатие или щелчок мимо закрывают его, фокус остаётся на кнопке. Пояснение со ссылкой или элементом управления идёт в порядке фокуса сразу за кнопкой и закрывается, когда фокус уходит с обоих.

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

<sf-help-mark label="Подробнее: код решения" text="Уникальное имя модуля латиницей."></sf-help-mark>

Источник

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

См. также

• Всплывающая подсказка
• Popover