Включение интерактивного режима

Tippy.js предоставляет удобный способ создавать всплывающие подсказки (tooltips) и поповеры с высокой кастомизацией. Одной из ключевых возможностей является интерактивный режим, который позволяет пользователю взаимодействовать с содержимым подсказки, не закрывая её при наведении на неё мышью. Это особенно полезно для всплывающих меню, форм или сложных элементов управления внутри тултипа.

Включение интерактивного режима

Интерактивный режим активируется с помощью опции interactive. Она принимает булево значение:

tippy('#myButton', {
  content: 'Это интерактивная подсказка',
  interactive: true
});

Разбор параметров:

interactive: true – делает подсказку интерактивной, позволяя пользователю кликать внутри неё и перемещать курсор без закрытия.
По умолчанию interactive равен false, что означает мгновенное закрытие подсказки при уходе курсора с целевого элемента.

Настройка интерактивной зоны

Интерактивная зона определяется автоматически вокруг контента подсказки, однако Tippy.js позволяет тонко управлять поведением с помощью дополнительных параметров:

interactiveBorder Определяет ширину области вокруг тултипа, в пределах которой курсор может находиться, чтобы подсказка не закрылась. По умолчанию 2 пикселя.
```
tippy('#myButton', {
  content: 'Подсказка с широкой интерактивной зоной',
  interactive: true,
  interactiveBorder: 10
});
```
interactiveDebounce Контролирует задержку перед закрытием интерактивного тултипа после ухода курсора с области. Удобно для предотвращения мгновенного закрытия при небольших колебаниях мыши. Значение задаётся в миллисекундах.
```
tippy('#myButton', {
  content: 'Подсказка с задержкой закрытия',
  interactive: true,
  interactiveDebounce: 75
});
```

Совмещение интерактивного режима с другими опциями

Интерактивные подсказки часто комбинируются с различными триггерами и анимациями.

Триггеры

mouseenter и mouseleave – стандартное поведение при наведении мыши.
click – интерактивная подсказка остаётся открытой после клика, позволяя взаимодействовать с её содержимым.
Комбинированный вариант:

tippy('#myButton', {
  content: 'Кликабельная интерактивная подсказка',
  interactive: true,
  trigger: 'click'
});

Анимации

Интерактивный режим хорошо работает с анимациями fade, scale и их комбинациями. При этом стоит учитывать задержку закрытия, чтобы анимация не прерывалась преждевременно.

tippy('#myButton', {
  content: 'Подсказка с анимацией',
  interactive: true,
  animation: 'scale',
  delay: [100, 200] // задержка появления и скрытия
});

Работа с динамическим контентом

Если внутрь подсказки помещаются элементы, которые могут динамически изменяться (например, формы или кнопки с обработчиками), интерактивный режим гарантирует, что пользователь сможет полноценно взаимодействовать с этими элементами:

tippy('#formButton', {
  content: `
    <form id="tooltipForm">
      <input type="text" placeholder="Ваше имя">
      <button type="submit">Отправить</button>
    </form>
  `,
  allowHTML: true,
  interactive: true
});

Опция allowHTML: true необходима для корректного рендеринга HTML-контента внутри тултипа.
Все события внутри формы будут работать без риска закрытия подсказки при наведении.

Ограничения интерактивного режима

Подсказка остаётся активной только в пределах interactiveBorder и непосредственно самого тултипа.
Использование большого контента может замедлить рендеринг и вызвать «мерцание» при быстром перемещении курсора.
Не рекомендуется сочетать с hideOnClick: true, если внутри тултипа есть кликабельные элементы, так как это может вызвать преждевременное закрытие.

Включение интерактивного режима