VGTooltip

Контекстные подсказки и информационные popover: от Data API до управления экземпляром.

Размещение и оформление

Двенадцать позиций, задержки и собственный контейнер.

Под каждым примером — его HTML, JavaScript и CSS. Подключите JS из vgapp и SCSS из vgapp/scss (или готовый CSS пакета). Кнопки и раскладка используют OKAUX 1.0.2; тема сайта управляется OKAUX.

Стороны и выравнивание

Нажмите кнопку нужной позиции. top / bottom / left / right поддерживают start и end. При нехватке места autoFlip выбирает запасную сторону; scroll и resize пересчитывают положение.

<div class="d-flex gap-3" style="flex-wrap: wrap">
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="top" data-vg-title="Позиция: top">top</button>
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="top-start" data-vg-title="Позиция: top-start">top-start</button>
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="top-end" data-vg-title="Позиция: top-end">top-end</button>
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="bottom" data-vg-title="Позиция: bottom">bottom</button>
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="bottom-start" data-vg-title="Позиция: bottom-start">bottom-start</button>
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="bottom-end" data-vg-title="Позиция: bottom-end">bottom-end</button>
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="left" data-vg-title="Позиция: left">left</button>
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="left-start" data-vg-title="Позиция: left-start">left-start</button>
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="left-end" data-vg-title="Позиция: left-end">left-end</button>
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="right" data-vg-title="Позиция: right">right</button>
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="right-start" data-vg-title="Позиция: right-start">right-start</button>
  <button type="button" class="btn btn-surface btn-sm" data-vg-toggle="tooltip" data-trigger="click"
    data-placement="right-end" data-vg-title="Позиция: right-end">right-end</button>
</div>

/**
 * Описание: декларативный пример VGTooltip — placement.
 * Возможности: подключение через публичный Data API.
 */
// Дополнительная инициализация не требуется: используется Data API.

/* Дополнительные стили не требуются. */

Задержка наведения

Показ через 700 мс, скрытие через 250 мс. Быстро проведите указателем над кнопкой: отложенный показ должен отмениться. Затем задержитесь над ней.

<button type="button" class="btn btn-primary" data-vg-toggle="tooltip"
  data-vg-title="Указатель задержался на 700 мс" data-delay-show="700" data-delay-hide="250"
  data-animation-enable="false" data-animation-delay="0">
  Задержитесь над кнопкой
</button>

/**
 * Описание: декларативный пример VGTooltip — delay.
 * Возможности: подключение через публичный Data API.
 */
// Дополнительная инициализация не требуется: используется Data API.

/* Дополнительные стили не требуются. */

Контейнер, класс и тема

Подсказка помещается внутрь позиционированного контейнера. CSS на custom.class меняет только публичные переменные VGTooltip, используя токены темы OKAUX. Переключите тему в шапке сайта.

<div id="tooltip-custom-container" class="tooltip-demo-container">
  <button type="button" class="btn btn-primary" data-vg-toggle="tooltip" data-trigger="click"
    data-container="#tooltip-custom-container" data-custom-class="tooltip-demo-themed"
    data-params='{"offset":[0,16],"fallbackPlacements":["top"]}'
    data-placement="bottom" data-vg-title="Токены темы, свой контейнер и скругление">
    Подсказка в контейнере
  </button>
</div>

/**
 * Описание: декларативный пример VGTooltip — custom.
 * Возможности: подключение через публичный Data API.
 */
// Дополнительная инициализация не требуется: используется Data API.

.tooltip-demo-container {
  position: relative;
  padding: 2rem 1rem 5rem;
  border: 1px dashed var(--vg-border-default);
  border-radius: var(--vg-radius-lg);
}
.vg-tooltip.tooltip-demo-themed {
  --vg-tooltip-background: var(--vg-bg-inverse);
  --vg-tooltip-color: var(--vg-text-inverse);
  --vg-tooltip-max-width: min(20rem, calc(100vw - 2rem));
  --vg-tooltip-border-radius: var(--vg-radius-lg);
  --vg-tooltip-padding: 12px 16px;
}