Закрытие при клике вне области

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

Использование опции interactive

По умолчанию, Tippy.js закрывает тултип при клике вне его области, если он не является интерактивным. Если тултип должен содержать элементы управления (кнопки, ссылки, формы), его необходимо сделать интерактивным:

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

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

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

Для более тонкой настройки используется опция trigger и методы управления открытием/закрытием тултипа:

tippy('#myButton', {
  content: 'Тултип с закрытием по клику вне',
  interactive: true,
  trigger: 'click', // тултип открывается по клику
  hideOnClick: true // автоматически скрывается при клике вне
});

  • trigger: 'click' — тултип открывается по клику на элемент.

  • hideOnClick: true — скрытие происходит при клике вне области тултипа или на самом триггере. Возможные значения hideOnClick:

    • true — закрытие при любом клике вне тултипа или на триггере.
    • 'toggle' — закрытие только при повторном клике на триггер.
    • false — тултип не скрывается автоматически при клике.

Использование метода tippy.hide()

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

const instance = tippy('#myButton', {
  content: 'Динамическое закрытие',
  interactive: true,
});

document.addEventListener('click', (event) => {
  if (!instance.popper.contains(event.target) && !instance.reference.contains(event.target)) {
    instance.hide();
  }
});

В этом примере:

  • Проверяется, находится ли клик внутри тултипа (instance.popper) или на элементе-триггере (instance.reference).
  • Если клик вне этих областей, вызывается hide(), закрывая тултип.

Автоматическое управление несколькими тултипами

Если на странице несколько интерактивных подсказок, удобно использовать глобальное закрытие всех тултипов при клике вне:

document.addEventListener('click', (event) => {
  tippy.hideAll({ duration: 200 }); // скрывает все тултипы с анимацией
});

Опция duration задаёт время анимации скрытия в миллисекундах. Этот подход особенно полезен для страниц с множеством всплывающих элементов.

Специфические сценарии

  1. Закрытие только при клике вне, но не на триггере

    tippy('#myButton', {
  content: 'Только вне тултипа',
  interactive: true,
  hideOnClick: false,
});

document.addEventListener('click', (event) => {
  const instance = tippy.instances[0]; // или другой способ получения экземпляра
  if (!instance.popper.contains(event.target)) {
    instance.hide();
  }
});

  2. Закрытие с задержкой Можно использовать setTimeout или опцию delay для плавного скрытия:

    tippy('#myButton', {
  content: 'С задержкой скрытие',
  interactive: true,
  delay: [0, 300], // 300ms задержка при скрытии
});

  3. Интеграция с библиотеками UI Tippy.js корректно работает вместе с фреймворками вроде React, Vue или Svelte, позволяя отслеживать клики вне компонента и вызывать hide() в нужных жизненных циклах.

Рекомендации по UX

  • Использовать interactive: true для тултипов с формами или кнопками.
  • Настраивать hideOnClick в зависимости от сценария взаимодействия.
  • При множественных тултипах на странице применять tippy.hideAll() для упрощения логики.
  • Добавлять задержку скрытия при сложных анимациях, чтобы пользователь видел плавное исчезновение тултипа.

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

Оглавление