Подсказка

Подсказка показывает короткое пояснение к элементу при наведении указателя или фокусе с клавиатуры. Не переносите в неё сведения, без которых нельзя выполнить действие: на сенсорном экране подсказка не открывается.

Пример

Наведите указатель на кнопку или перейдите к ней клавишей Tab. Подсказка остаётся видимой, пока указатель над ней, и закрывается по Escape без переноса фокуса.

HTML

<div class="p-8">
  <div class="flex justify-center p-top-8">
    <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 class="sf-tooltip-supporting-text">Ctrl + S</span>
        </span>
        <span class="sf-tooltip-tail" aria-hidden="true"></span>
      </span>
    </span>
    </span>
  </div>
</div>

Разметка

Минимальную разметку показывает пример выше. Части вложены так: обёртка sf-tooltip-anchor → элемент-триггер и поверхность sf-tooltip → sf-tooltip-content → sf-tooltip-wrap с sf-tooltip-text и sf-tooltip-supporting-text, затем хвост sf-tooltip-tail.

Триггер — нативный фокусируемый элемент: кнопка, ссылка, поле. На теге Smart-компонента, например <sf-icon-button>, описание достаётся самому тегу, а не кнопке внутри него; для подсказки берите классовую кнопку sf-icon-button. Атрибут data-tooltip на нём хранит id поверхности; пустой data-tooltip берёт поверхность из той же обёртки.
На поверхности — вид, размер и положение стрелки. Атрибут hidden скрывает её до первого показа.
sf-tooltip-text — основной текст, sf-tooltip-supporting-text — пояснение или сочетание клавиш. Хвост sf-tooltip-tail скрыт от экранного диктора.
Поверхность без обёртки и триггера не скрывается и не позиционируется: так её используют компоненты, которые сами управляют видимостью, например слайдер диапазона.

Варианты

Вид

sf-tooltip--dark — контрастная тёмная поверхность, заметная на любом фоне. sf-tooltip--light — светлая поверхность без границы; она читается на затемнённом или цветном фоне и теряется на светлом. Класс вида обязателен: без него у поверхности нет фона.

sf-tooltip--dark

sf-tooltip--light

HTML

<div class="flex flex-wrap items-end gap-4 p-3 radius-3 bg-surface-container">
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-none" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Сохранить</span><span class="sf-tooltip-supporting-text">Ctrl + S</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--dark</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--light sf-tooltip--size-1 sf-tooltip--arrow-none" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Сохранить</span><span class="sf-tooltip-supporting-text">Ctrl + S</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--light</code>
  </div>
</div>

Размер

Пять ступеней — sf-tooltip--size-1/3, sf-tooltip--size-1/2, sf-tooltip--size-1, sf-tooltip--size-2 и sf-tooltip--size-3 — меняют кегль и отступы. Берите ступень триггера.

sf-tooltip--size-1/3

sf-tooltip--size-1/2

sf-tooltip--size-1

sf-tooltip--size-2

sf-tooltip--size-3

HTML

<div class="flex flex-wrap items-end gap-4">
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1/3 sf-tooltip--arrow-none" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--size-1/3</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1/2 sf-tooltip--arrow-none" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--size-1/2</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-none" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--size-1</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-2 sf-tooltip--arrow-none" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--size-2</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-3 sf-tooltip--arrow-none" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--size-3</code>
  </div>
</div>

Положение стрелки

Класс стрелки задаёт и сторону, на которой открывается подсказка: стрелка снизу (sf-tooltip--arrow-bottom-*) ставит подсказку над триггером, стрелка сверху (sf-tooltip--arrow-top-*) — под ним, sf-tooltip--arrow-inline-end — перед триггером, sf-tooltip--arrow-inline-start — после него. Окончания center, inline-start и inline-end выравнивают подсказку по центру, началу или концу триггера с учётом направления письма. sf-tooltip--arrow-none убирает стрелку. Если со своей стороны подсказке не хватает места, она открывается с противоположной и переворачивает стрелку. Классы left, right, top-left, top-right, bottom-left и bottom-right — физические варианты тех же положений, они не зеркалятся.

HTML

<div class="grid grid-col-1 md:grid-col-3 gap-4 p-2">
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-top-center" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--arrow-top-center</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-bottom-center" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--arrow-bottom-center</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-top-inline-start" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--arrow-top-inline-start</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-top-inline-end" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--arrow-top-inline-end</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-bottom-inline-start" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--arrow-bottom-inline-start</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-bottom-inline-end" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--arrow-bottom-inline-end</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-inline-start" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--arrow-inline-start</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-inline-end" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--arrow-inline-end</code>
  </div>
  <div class="flex flex-col items-start gap-2">
    <div class="sf-tooltip sf-tooltip--dark sf-tooltip--size-1 sf-tooltip--arrow-none" aria-hidden="true"><div class="sf-tooltip-content flex flex-col"><div class="sf-tooltip-wrap flex flex-col"><span class="sf-tooltip-text">Подсказка</span></div><span class="sf-tooltip-tail" aria-hidden="true"></span></div></div>
    <code class="text-1/2 color-on-surface-variant">sf-tooltip--arrow-none</code>
  </div>
</div>

Длинный текст

Короткая подсказка занимает ширину своего текста. Длинный текст ограничен шириной --sf-tooltip--max-inline-size и переносится без обрезания, в том числе длинные слова.

HTML

<div class="flex justify-center p-8">
  <span class="sf-tooltip-anchor">
    <button type="button"
      class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"
      data-tooltip="long-tooltip" aria-describedby="long-tooltip">
      <span class="sf-button-text-container">Ограничения</span>
    </button>
    <span id="long-tooltip"
      class="sf-tooltip sf-tooltip--light 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 class="sf-tooltip-supporting-text">Очень длинный идентификатор project-documentation-access-policy переносится без обрезания.</span>
        </span>
        <span class="sf-tooltip-tail" aria-hidden="true"></span>
      </span>
    </span>
  </span>
</div>

Доступность

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

JavaScript

Скрипт компонента находит триггеры [data-tooltip] при загрузке страницы и в добавленной позже разметке, поэтому подсказка в новой разметке работает без вызовов. Подсказку располагает общий модуль позиционирования Framework: она следует за триггером при прокрутке и смене размера окна. Событий компонент не отправляет.

Классы

Что	Классы
Блок	`sf-tooltip`
Части	`sf-tooltip-anchor`, `sf-tooltip-content`, `sf-tooltip-supporting-text`, `sf-tooltip-tail`, `sf-tooltip-text`, `sf-tooltip-wrap`
Модификаторы	`sf-tooltip--arrow-bottom-center`, `sf-tooltip--arrow-bottom-inline-end`, `sf-tooltip--arrow-bottom-inline-start`, `sf-tooltip--arrow-bottom-left`, `sf-tooltip--arrow-bottom-right`, `sf-tooltip--arrow-inline-end`, `sf-tooltip--arrow-inline-start`, `sf-tooltip--arrow-left`, `sf-tooltip--arrow-none`, `sf-tooltip--arrow-right`, `sf-tooltip--arrow-top-center`, `sf-tooltip--arrow-top-inline-end`, `sf-tooltip--arrow-top-inline-start`, `sf-tooltip--arrow-top-left`, `sf-tooltip--arrow-top-right`, `sf-tooltip--dark`, `sf-tooltip--light`
Размеры	`sf-tooltip--size-1`, `sf-tooltip--size-1/2`, `sf-tooltip--size-1/3`, `sf-tooltip--size-2`, `sf-tooltip--size-3`

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Настройка

Эти переменные — поверхность настройки компонента. Их имена стабильны: переименовать или убрать такую переменную можно только через журнал изменений, с предупреждением, как атрибут. Framework их не задаёт, поэтому значение можно поставить на сам компонент (.sf-tooltip) или на любого предка. Переменные действуют на спокойный вид; наведение, фокус, нажатие, недоступность и ошибка рисуются поверх, поэтому состояния остаются видны.

Переменная	Что задаёт	По умолчанию
`--sf-tooltip-background-color`	Заливка подсказки вместе с хвостиком.	`var(--sf-elevation-2--surface)`; зависит от вида
`--sf-tooltip-color`	Цвет текста и поясняющего текста.	`var(--sf-on-surface)`; зависит от вида
`--sf-tooltip-border-color`	Цвет рамки светлого вида; у тёмного рамки нет.	`var(--sf-outline-variant)`; зависит от вида
`--sf-tooltip-border-width`	Толщина рамки светлого вида со всех сторон; у тёмного рамки нет.	`var(--sf-px)`; зависит от вида
`--sf-tooltip-radius`	Скругление углов.	`var(--sf-radius--ui)`
`--sf-tooltip-padding-inline`	Отступ до и после текста по строчной оси.	`var(--sf-ui-1--space-x)`; зависит от размера
`--sf-tooltip-padding-block`	Отступ над и под текстом.	`var(--sf-ui-1--space-y-tightness-default)`; зависит от размера
`--sf-tooltip-gap`	Промежуток между текстом и поясняющим текстом.	`var(--sf-space-1/4)`

CSS

.sf-tooltip {
  --sf-tooltip-radius: 0;
}

Устройство

Остальные переменные — внутренняя проводка компонента: модификаторы задают им значения, а части их читают. Их имена и устройство могут меняться в любом выпуске, поэтому проект их не задаёт. Значение по умолчанию — из базового правила блока (.sf-tooltip); переменную без него задают только модификаторы.

Переменная	По умолчанию	Задаёт
`--sf-tooltip-content--background-color`	не задана; задают модификаторы, например `.sf-tooltip--dark .sf-tooltip-content`: `var(--sf-tooltip-background-color, var(--sf-surface-inverse-fixed))`	`background-color`
`--sf-tooltip-content--border-end-end-radius`	не задана; задают модификаторы, например `.sf-tooltip .sf-tooltip-content`: `var(--sf-tooltip-radius, var(--sf-radius--ui))`	`border-end-end-radius`
`--sf-tooltip-content--border-end-start-radius`	не задана; задают модификаторы, например `.sf-tooltip .sf-tooltip-content`: `var(--sf-tooltip-radius, var(--sf-radius--ui))`	`border-end-start-radius`
`--sf-tooltip-content--border-start-end-radius`	не задана; задают модификаторы, например `.sf-tooltip .sf-tooltip-content`: `var(--sf-tooltip-radius, var(--sf-radius--ui))`	`border-start-end-radius`
`--sf-tooltip-content--border-start-start-radius`	не задана; задают модификаторы, например `.sf-tooltip .sf-tooltip-content`: `var(--sf-tooltip-radius, var(--sf-radius--ui))`	`border-start-start-radius`
`--sf-tooltip-content--padding-bottom`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--size-1 .sf-tooltip-content`: `var(--sf-tooltip-padding-block, var(--sf-ui-1--space-y-tightness-default))`	`padding-bottom`
`--sf-tooltip-content--padding-inline-end`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--size-1 .sf-tooltip-content`: `var(--sf-tooltip-padding-inline, var(--sf-ui-1--space-x))`	`padding-inline-end`
`--sf-tooltip-content--padding-inline-start`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--size-1 .sf-tooltip-content`: `var(--sf-tooltip-padding-inline, var(--sf-ui-1--space-x))`	`padding-inline-start`
`--sf-tooltip-content--padding-top`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--size-1 .sf-tooltip-content`: `var(--sf-tooltip-padding-block, var(--sf-ui-1--space-y-tightness-default))`	`padding-top`
`--sf-tooltip-supporting-text--color`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--dark .sf-tooltip-supporting-text`: `var(--sf-tooltip-color, var(--sf-on-surface-inverse-fixed))`	`color`
`--sf-tooltip-supporting-text--font-family`	не задана; задают модификаторы, например `.sf-tooltip .sf-tooltip-supporting-text`: `var(--sf-text--family)`	`font-family`
`--sf-tooltip-supporting-text--font-size`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--dark.sf-tooltip--size-1 .sf-tooltip-supporting-text`: `var(--sf-text-size-1)`	`font-size`
`--sf-tooltip-supporting-text--font-weight`	не задана; задают модификаторы, например `.sf-tooltip .sf-tooltip-supporting-text`: `var(--sf-font-weight-regular)`	`font-weight`
`--sf-tooltip-supporting-text--line-height`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--dark.sf-tooltip--size-1 .sf-tooltip-supporting-text`: `var(--sf-text-height-1)`	`line-height`
`--sf-tooltip-tail--background-color`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--dark .sf-tooltip-tail`: `var(--sf-tooltip-background-color, var(--sf-surface-inverse-fixed))`	`background-color`
`--sf-tooltip-tail--color`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--dark.sf-tooltip--arrow-bottom-left.sf-tooltip--size-1 .sf-tooltip-tail`: `var(--sf-on-surface-inverse-fixed)`	`color`
`--sf-tooltip-tail--font-family`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--dark.sf-tooltip--arrow-bottom-left.sf-tooltip--size-1 .sf-tooltip-tail`: `var(--sf-text--family)`	`font-family`
`--sf-tooltip-tail--font-size`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--dark.sf-tooltip--arrow-bottom-left.sf-tooltip--size-1 .sf-tooltip-tail`: `var(--sf-text-size-1)`	`font-size`
`--sf-tooltip-tail--font-weight`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--dark.sf-tooltip--arrow-bottom-left.sf-tooltip--size-1 .sf-tooltip-tail`: `var(--sf-font-weight-regular)`	`font-weight`
`--sf-tooltip-tail--line-height`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--dark.sf-tooltip--arrow-bottom-left.sf-tooltip--size-1 .sf-tooltip-tail`: `var(--sf-text-height-1)`	`line-height`
`--sf-tooltip-tail-corner-offset`	`var(--sf-b6)`	`inset-inline-start`, `inset-inline-end`
`--sf-tooltip-tail-half`	`calc(var(--sf-tooltip-tail-size) / 2)`	`bottom`, `inset-block-end`, `top`, `inset-block-start`, `inset-inline-end`, `inset-inline-start`
`--sf-tooltip-tail-size`	`var(--sf-b2)`	`--sf-tooltip-tail-half`, `width`, `height`
`--sf-tooltip-text--color`	не задана; задают модификаторы, например `.sf-tooltip--dark .sf-tooltip-text`: `var(--sf-tooltip-color, var(--sf-on-surface-inverse-fixed))`	`color`
`--sf-tooltip-text--font-family`	не задана; задают модификаторы, например `.sf-tooltip .sf-tooltip-text`: `var(--sf-text--family)`	`font-family`
`--sf-tooltip-text--font-size`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--size-1 .sf-tooltip-text`: `var(--sf-text-size-1)`	`font-size`
`--sf-tooltip-text--font-weight`	не задана; задают модификаторы, например `.sf-tooltip .sf-tooltip-text`: `var(--sf-font-weight-bold)`	`font-weight`
`--sf-tooltip-text--line-height`	не задана; задают модификаторы, например `.sf-tooltip.sf-tooltip--size-1 .sf-tooltip-text`: `var(--sf-text-height-1)`	`line-height`
`--sf-tooltip-wrap--background-color`	не задана; задают модификаторы, например `.sf-tooltip .sf-tooltip-wrap`: `transparent`	`background-color`
`--sf-tooltip-wrap--gap`	не задана; задают модификаторы, например `.sf-tooltip .sf-tooltip-wrap`: `var(--sf-tooltip-gap, var(--sf-space-1/4))`	`gap`

См. также

Tooltip — Smart-компонент

Навигация

Главное

Документация

Содержание

Подсказка

Пример

Разметка

Варианты

Вид

Размер

Положение стрелки

Длинный текст

Доступность

JavaScript

Классы

Переменные

Настройка

Устройство

См. также

Настройки

Подсказка

Пример

Разметка

Варианты

Вид

Размер

Положение стрелки

Длинный текст

Доступность

JavaScript

Классы

Переменные

Настройка

Устройство

См. также

Поиск по документации