Обработка кликов внутри содержимого

В Tippy.js каждая всплывающая подсказка создаётся как отдельный DOM-элемент с собственным деревом узлов. Это позволяет полностью контролировать поведение элементов внутри тултипа, включая обработку кликов, событий мыши и взаимодействие с формами. По умолчанию Tippy.js закрывает тултип при клике вне него, однако иногда требуется, чтобы клики внутри тултипа не приводили к его закрытию. Для этого используется сочетание настроек и кастомных обработчиков.

Настройка интерактивного тултипа

Свойство interactive определяет, будет ли тултип реагировать на взаимодействие пользователя внутри себя:

tippy('#button', {
  content: '<button id="insideButton">Нажми меня</button>',
  interactive: true,
});
  • interactive: true позволяет оставлять тултип открытым при наведении или кликах на его содержимое.
  • Без этой опции клики внутри содержимого автоматически закрывают тултип.

Предотвращение закрытия при клике внутри тултипа

Для полной обработки кликов внутри тултипа можно использовать событие onClick в сочетании с interactive:

tippy('#button', {
  content: '<div id="popupContent"><button>Клик внутри</button></div>',
  interactive: true,
  trigger: 'click',
  hideOnClick: false,
});

Пояснение ключевых опций:

  • trigger: 'click' – тултип открывается по клику на элемент.
  • hideOnClick: false – тултип не скрывается автоматически при клике внутри него.
  • interactive: true – делает содержимое интерактивным, позволяя реагировать на события мыши и клики внутри тултипа.

Использование событий для элементов внутри тултипа

Можно добавлять обработчики к конкретным элементам внутри тултипа:

const tip = tippy('#button', {
  content: '<button id="actionBtn">Действие</button>',
  interactive: true,
  trigger: 'click',
});

tip[0].popper.addEventListener('click', (event) => {
  if (event.target.id === 'actionBtn') {
    console.log('Кнопка внутри тултипа нажата');
  }
});
  • tip[0].popper – это корневой элемент тултипа в DOM.
  • Внутри можно отлавливать события click, mouseover, keydown и любые другие стандартные события.

Такой подход удобен, когда тултип содержит формы, кнопки или элементы управления, которые должны оставаться интерактивными без закрытия тултипа.

Динамическое обновление содержимого

Tippy.js позволяет менять содержимое тултипа на лету, не создавая новый экземпляр:

const tip = tippy('#button', {
  content: 'Первый текст',
  interactive: true,
  trigger: 'click',
});

document.querySelector('#button').addEventListener('click', () => {
  tip[0].setContent('<button id="dynamicBtn">Новая кнопка</button>');
});
  • После вызова setContent все события внутри нового содержимого нужно переназначить, если они нужны.
  • Это обеспечивает динамическое управление интерактивностью тултипа без пересоздания объекта.

Работа с формами и элементами ввода

Для форм внутри тултипа важно, чтобы события ввода не закрывали тултип:

tippy('#formButton', {
  content: `
    <form id="popupForm">
      <input type="text" placeholder="Введите текст" />
      <button type="submit">Отправить</button>
    </form>
  `,
  interactive: true,
  trigger: 'click',
  hideOnClick: false,
});
  • Ключевое значение interactive: true предотвращает скрытие тултипа при фокусе на input.
  • Формы могут быть обработаны стандартным образом через submit событие, без риска закрытия тултипа.

Использование делегирования для внутренних кликов

Если тултип содержит большое количество интерактивных элементов, удобнее использовать делегирование:

const tip = tippy('#button', {
  content: `
    <div id="container">
      <button class="item">Элемент 1</button>
      <button class="item">Элемент 2</button>
    </div>
  `,
  interactive: true,
  trigger: 'click',
  hideOnClick: false,
});

tip[0].popper.addEventListener('click', (event) => {
  if (event.target.classList.contains('item')) {
    console.log('Нажат элемент:', event.target.textContent);
  }
});
  • Делегирование позволяет обрабатывать любое количество элементов без назначения отдельного обработчика на каждый.
  • Это повышает производительность при работе с динамическим контентом.

Практические советы

  1. Комбинация interactive: true + hideOnClick: false – основной шаблон для интерактивных тултипов.
  2. Для закрытия тултипа по кнопке внутри используйте tip.hide() или tip[0].hide().
  3. При использовании динамического контента обязательно переназначайте обработчики событий.
  4. Тултипы с формами должны использовать interactive: true, чтобы пользовательский фокус не приводил к закрытию.
  5. Для сложных взаимодействий применяйте popper-события напрямую, это дает полный контроль над содержимым.

Эти техники позволяют создавать полностью интерактивные тултипы в Tippy.js, где клики и действия внутри содержимого обрабатываются гибко, без случайного закрытия.

Оглавление