Параметры интерактивности

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

Свойство interactive

interactive — булевый параметр, который определяет, можно ли взаимодействовать с содержимым тултипа:

tippy('#button', {
  content: 'Наведите курсор, чтобы увидеть подсказку',
  interactive: true
});

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

Особенности использования:

  • Если interactive: false (по умолчанию), тултип закрывается при уходе курсора с целевого элемента.
  • Для интерактивного тултипа часто имеет смысл увеличить задержку закрытия с помощью delay или hideOnClick: false, чтобы пользователь успевал кликнуть по элементам внутри.

Свойство trigger

trigger задаёт события, при которых тултип будет открываться. Возможные значения:

  • 'mouseenter focus' — открытие при наведении и при фокусе на элементе (по умолчанию).
  • 'click' — открытие при клике.
  • 'manual' — открытие только через методы show(), hide(), toggle().

Пример с несколькими триггерами:

tippy('#icon', {
  content: 'Интерактивный тултип',
  interactive: true,
  trigger: 'mouseenter click'
});

Это позволяет тултипу оставаться видимым, если пользователь кликает на элемент или наводит курсор.

Свойство hideOnClick

hideOnClick управляет тем, закрывается ли тултип при клике на целевой элемент:

tippy('#menu', {
  content: 'Меню настроек',
  interactive: true,
  hideOnClick: false
});

При hideOnClick: false интерактивный тултип не закрывается при клике внутри него. Это удобно для всплывающих меню и форм. Значение может быть:

  • true — закрытие при клике на целевой элемент или вне тултипа.
  • false — тултип остаётся открытым при кликах.
  • 'toggle' — клик по целевому элементу закрывает тултип, клик вне его — не влияет.

Свойство placement и интерактивность

Интерактивность тесно связана с позиционированием тултипа. Свойство placement определяет расположение подсказки относительно целевого элемента: 'top', 'bottom', 'left', 'right' и их вариации (-start, -end).

tippy('#info', {
  content: 'Дополнительная информация',
  interactive: true,
  placement: 'right-start'
});

Для интерактивных тултипов рекомендуется проверять, чтобы позиция позволяла пользователю удобно перемещать курсор с целевого элемента на тултип, не вызывая случайного закрытия.

Свойство delay

delay задаёт задержку открытия и закрытия тултипа. В интерактивных случаях удобно установить разные значения для открытия и закрытия:

tippy('#link', {
  content: 'Ссылка с подсказкой',
  interactive: true,
  delay: [100, 300] // открытие через 100 мс, закрытие через 300 мс
});
  • Первая цифра — задержка перед показом тултипа.
  • Вторая — задержка перед скрытием.

Большая задержка закрытия предотвращает случайное исчезновение тултипа, когда пользователь перемещает курсор между элементом и подсказкой.

Методы управления интерактивными тултипами

Для более сложного поведения используются методы экземпляра:

  • show() — открыть тултип вручную.
  • hide() — закрыть тултип.
  • toggle() — переключить состояние видимости.
  • setContent(newContent) — динамически изменить содержимое.

Пример с программным управлением:

const tip = tippy('#settings', {
  content: 'Настройки профиля',
  interactive: true,
  trigger: 'manual'
});

document.querySelector('#settings').addEventListener('click', () => {
  tip[0].toggle();
});

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

Интерактивные тултипы и события мыши

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

  • onShow(instance) — перед показом.
  • onHide(instance) — перед скрытием.
  • onMount(instance) — после монтирования в DOM.
  • onUntrigger(instance) — когда пользователь уводит курсор с триггера.
tippy('#help', {
  content: 'Подсказка с действиями',
  interactive: true,
  onHide(instance) {
    console.log('Тултип скрыт');
  }
});

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

Итоговые рекомендации по интерактивности

  • Всегда устанавливать interactive: true, если в тултипе есть кликабельные элементы.
  • Настраивать delay для предотвращения случайного закрытия.
  • Использовать hideOnClick: false для всплывающих меню и форм.
  • Сочетать trigger: 'manual' с методами show()/hide() для сложных интерфейсов.
  • Проверять положение тултипа через placement, чтобы курсор мог перемещаться между элементом и тултипом без закрытия.

Эти параметры позволяют создавать сложные и удобные интерфейсы с интерактивными подсказками, повышая пользовательский опыт и предотвращая случайные закрытия тултипов.

Оглавление