VGTooltip

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

Базовые сценарии

Наведение, клик, информационный popover и доверенный HTML.

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

Подсказка при наведении

Минимальный Data API. title переносится в data-vg-original-title, чтобы не показывать одновременно нативную подсказку.

<button type="button" class="btn btn-primary" data-vg-toggle="tooltip" title="Сохранение не отправляет форму">
  Наведите указатель
</button>

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

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

Ссылка с иконкой и подписью

Иконка сверху, текст снизу, между ними 8 пикселей. Проведите указателем от иконки к подписи через промежуток: подсказка остаётся видимой по всей площади ссылки.

Пример подсказки

<a href="#tooltip-example-hover" class="stack stack-inline gap-2 p-4 text-center"
  data-vg-toggle="tooltip" title="Подсказка для всей ссылки">
  <svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
    aria-hidden="true" focusable="false">
    <path d="M3 7a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
  </svg>
  <span>Пример подсказки</span>
</a>

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

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

Клик и закрытие

Клик переключает подсказку. Повторный клик, Esc или клик вне триггера закрывают её. Кнопку можно активировать с клавиатуры.

<button type="button" class="btn btn-primary" data-vg-toggle="tooltip"
  data-trigger="click" data-vg-title="Клик снаружи или Esc закроет подсказку">
  Нажмите для подсказки
</button>

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

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

Заголовок и содержание

Popover открывается по клику. Второй popover закрывает первый (closeOther: true). Это информационная панель без focus trap: ссылки и формы внутри не поддерживаются.

<div class="d-flex gap-3" style="flex-wrap: wrap">
  <button type="button" class="btn btn-primary" data-vg-toggle="popover"
    data-vg-title="Срок хранения" data-vg-content="Резервная копия хранится 30 дней.">
    Условия хранения
  </button>
  <button type="button" class="btn btn-surface" data-vg-toggle="popover"
    data-vg-title="Восстановление" data-vg-content="Восстановление доступно владельцу проекта.">
    Кто может восстановить?
  </button>
</div>

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

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

Текст и доверенный HTML

По умолчанию теги показываются как текст. html: true разрешает разметку без санитизации: используйте только доверенный или заранее очищенный HTML.

<div class="d-flex gap-3" style="flex-wrap: wrap">
  <button type="button" class="btn btn-surface" data-vg-toggle="tooltip" data-trigger="click"
    data-vg-title="&lt;strong&gt;Обычный текст&lt;/strong&gt;">
    HTML выключен
  </button>
  <button type="button" class="btn btn-primary" data-vg-toggle="popover" data-html="true"
    data-vg-title="&lt;strong&gt;Доверенный HTML&lt;/strong&gt;"
    data-vg-content="Резервная копия &lt;em&gt;успешно создана&lt;/em&gt;.&lt;br&gt;Можно продолжать работу.">
    HTML включён
  </button>
</div>

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

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