VGTooltip

<div id="tooltip-api-demo">
  <button id="tooltip-api-target" type="button" class="btn btn-surface"
    title="Управляемая подсказка">Триггер под управлением API</button>
  <p>Внешние управляющие элементы:</p>
  <div class="d-flex gap-3" style="flex-wrap: wrap">
    <button type="button" class="btn btn-primary btn-sm" id="tooltip-api-show">show()</button>
    <button type="button" class="btn btn-surface btn-sm" id="tooltip-api-hide">hide()</button>
    <button type="button" class="btn btn-surface btn-sm" id="tooltip-api-toggle">toggle()</button>
    <button type="button" class="btn btn-surface btn-sm" id="tooltip-api-dispose">dispose()</button>
    <button type="button" class="btn btn-surface btn-sm" id="tooltip-api-init">init()</button>
  </div>
  <div class="d-flex gap-3 mt-4" style="flex-wrap: wrap">
    <label><input type="checkbox" id="tooltip-api-prevent-show"> Отменять show</label>
    <label><input type="checkbox" id="tooltip-api-prevent-hide"> Отменять hide</label>
  </div>
  <pre id="tooltip-api-log" class="tooltip-demo-log" aria-live="polite">Журнал событий</pre>
</div>

/**
 * Описание: ручное управление экземпляром VGTooltip.
 * Возможности: методы, повторная инициализация и отмена событий show/hide.
 */
import { VGTooltip } from 'vgapp';

function initTooltipDemo() {
  const root = document.querySelector('#tooltip-api-demo');
  if (!root || root.dataset.ready) return;
  root.dataset.ready = 'true';
  const target = root.querySelector('#tooltip-api-target');
  const log = root.querySelector('#tooltip-api-log');
  const write = message => {
    log.textContent = (log.textContent + '\n' + message).split('\n').slice(-10).join('\n');
  };
  const init = () => {
    VGTooltip.getOrCreateInstance(target, {
      closeOnOutsideClick: false,
      closeOther: false,
      keyboard: false,
      delay: { show: 0, hide: 0 },
      animation: { enable: false, delay: 0 }
    });
    write('init: экземпляр готов');
  };
  ['show', 'shown', 'hide', 'hidden'].forEach(name => {
    target.addEventListener('vg.tooltip.' + name, event => {
      const prevent = root.querySelector('#tooltip-api-prevent-' + name);
      if (prevent?.checked) {
        event.preventDefault();
        write(name + ': отменено');
      } else {
        write(name);
      }
    });
  });
  ['show', 'hide', 'toggle', 'dispose'].forEach(method => {
    root.querySelector('#tooltip-api-' + method).addEventListener('click', () => {
      const instance = VGTooltip.getInstance(target);
      if (!instance) { write('Сначала нажмите init()'); return; }
      instance[method]();
      if (method === 'dispose') write('dispose: экземпляр удалён, title восстановлен');
    });
  });
  root.querySelector('#tooltip-api-init').addEventListener('click', init);
  init();
}

initTooltipDemo();

.tooltip-demo-log {
  margin-top: 1rem;
  padding: 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--vg-bg-secondary);
  color: var(--vg-text-primary);
  border: 1px solid var(--vg-border-default);
  border-radius: var(--vg-radius-lg);
}

<div id="tooltip-dynamic-demo">
<div class="d-flex gap-3" style="flex-wrap: wrap">
    <button type="button" class="btn btn-primary btn-sm" id="tooltip-dynamic-add">Добавить триггер</button>
    <button type="button" class="btn btn-surface btn-sm" id="tooltip-dynamic-update">Изменить текст</button>
    <button type="button" class="btn btn-surface btn-sm" id="tooltip-dynamic-remove">Удалить триггер</button>
  </div>
  <div id="tooltip-dynamic-slot" class="mt-4"></div>
  <p id="tooltip-dynamic-status" class="mt-4" role="status">Нажмите «Добавить триггер».</p>
</div>

/**
 * Описание: динамические триггеры VGTooltip.
 * Возможности: делегированный Data API, замена текста и очистка при удалении DOM.
 */
import { VGTooltip } from 'vgapp';

function initTooltipDemo() {
  const root = document.querySelector('#tooltip-dynamic-demo');
  if (!root || root.dataset.ready) return;
  root.dataset.ready = 'true';
  const slot = root.querySelector('#tooltip-dynamic-slot');
  const status = root.querySelector('#tooltip-dynamic-status');
  let revision = 1;
  root.querySelector('#tooltip-dynamic-add').addEventListener('click', () => {
    if (slot.firstElementChild) { status.textContent = 'Триггер уже добавлен.'; return; }
    const target = document.createElement('button');
    target.type = 'button';
    target.className = 'btn btn-surface';
    target.textContent = 'Открыть динамическую подсказку';
    target.setAttribute('data-vg-toggle', 'tooltip');
    target.setAttribute('data-trigger', 'click');
    target.setAttribute('data-params', '{"closeOnOutsideClick":false,"closeOther":false}');
    target.setAttribute('data-vg-title', 'Версия текста: ' + revision);
    slot.append(target);
    status.textContent = 'Триггер добавлен без ручной инициализации.';
  });
  root.querySelector('#tooltip-dynamic-update').addEventListener('click', () => {
    const target = slot.firstElementChild;
    if (!target) { status.textContent = 'Сначала добавьте триггер.'; return; }
    VGTooltip.getInstance(target)?.dispose();
    target.setAttribute('data-vg-title', 'Версия текста: ' + (++revision));
    VGTooltip.getOrCreateInstance(target).show();
    status.textContent = 'Новый экземпляр показывает версию ' + revision + '.';
  });
  root.querySelector('#tooltip-dynamic-remove').addEventListener('click', () => {
    const target = slot.firstElementChild;
    if (!target) { status.textContent = 'Триггер уже удалён.'; return; }
    // Открытый экземпляр сам обнаружит удаление через MutationObserver.
    // Неоткрытый экземпляр освобождаем явно перед удалением.
    if (!target.classList.contains('show')) VGTooltip.getInstance(target)?.dispose();
    target.remove();
    status.textContent = 'Триггер удалён. Открытая подсказка очищается модулем.';
  });
}

initTooltipDemo();

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