Параметры видимости

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

trigger — управление триггером появления

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

tippy('#button', {
  content: 'Пример тултипа',
  trigger: 'mouseenter focus'
});
  • mouseenter — появление при наведении мыши.
  • focus — появление при фокусе на элементе (например, через Tab).
  • click — появление при клике.
  • manual — отключает автоматические события. Видимость управляется вручную через методы .show() и .hide().

Особенности manual триггера: Используется для сложной логики отображения, когда нужно полностью контролировать время появления тултипа через код.

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

Каждый тултип, созданный через tippy(), возвращает объект с набором методов:

const tip = tippy('#button', {
  content: 'Тултип'
})[0];

Основные методы:

  • .show() — принудительное отображение тултипа.
  • .hide() — скрытие тултипа.
  • .toggle() — переключение состояния видимости.
  • .disable() / .enable() — отключение или включение возможности показывать тултип.
  • .setProps({...}) — динамическая смена параметров тултипа, включая управление видимостью через опции.
tip.show();
tip.setProps({ content: 'Новый текст' });
tip.hide();

visible — статическая видимость

Опция visible позволяет принудительно установить состояние видимости при инициализации:

tippy('#button', {
  content: 'Видимый тултип',
  visible: true
});
  • Значение true отображает тултип сразу после рендеринга.
  • Используется редко, чаще для тестирования или динамических интерфейсов.

hideOnClick и контроль скрытия

Параметр hideOnClick отвечает за скрытие тултипа при клике:

  • true — стандартное поведение (скрывается при клике на элемент).
  • false — тултип не закрывается при клике.
  • 'toggle' — клик по элементу переключает состояние видимости.
tippy('#button', {
  content: 'Кликабельный тултип',
  hideOnClick: 'toggle'
});

События видимости

Tippy.js предоставляет hook’и событий, которые позволяют реагировать на изменение состояния:

  • onShow(instance) — перед показом тултипа.
  • onShown(instance) — после появления.
  • onHide(instance) — перед скрытием.
  • onHidden(instance) — после скрытия.

Пример использования:

tippy('#button', {
  content: 'Событийный тултип',
  onShow(instance) {
    console.log('Тултип собирается показать');
  },
  onHidden(instance) {
    console.log('Тултип скрыт');
  }
});

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

Динамическая видимость через interactive и delay

Опция interactive делает тултип «живым», позволяя пользователю взаимодействовать с его содержимым, не скрывая его при уходе курсора:

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

Опция delay позволяет настроить задержку перед показом или скрытием:

tippy('#button', {
  content: 'Задержка показа',
  delay: [500, 200] // 500ms до показа, 200ms до скрытия
});

Примеры комбинаций параметров

  1. Тултип, который показывается только по клику и остаётся активным:
tippy('#button', {
  content: 'Клик активирует',
  trigger: 'click',
  interactive: true,
  hideOnClick: false
});
  1. Тултип с ручным управлением:
const tip = tippy('#button', {
  content: 'Ручное управление',
  trigger: 'manual'
})[0];

// Показ через 2 секунды
setTimeout(() => tip.show(), 2000);
  1. Комбинированная задержка и события:
tippy('#button', {
  content: 'Задержка и события',
  delay: [300, 100],
  onShow() { console.log('Показываем тултип'); },
  onHidden() { console.log('Скрыли тултип'); }
});

Особенности управления видимостью при множественных тултипах

При множественных тултипах важно учитывать параметр singleton:

const tips = tippy('.buttons', {
  content: 'Общий тултип'
});

tippy.createSingleton(tips, {
  delay: 100,
  moveTransition: 'transform 0.2s ease-out'
});
  • Позволяет показывать один тултип для группы элементов.
  • Контролирует видимость централизованно, без наложения множества всплывающих окон.

Подытоживание ключевых параметров видимости

  • trigger — событие, инициирующее появление.
  • manual — полное управление через методы.
  • visible — начальное состояние видимости.
  • hideOnClick — контроль скрытия по клику.
  • Методы .show(), .hide(), .toggle() — прямое управление.
  • События onShow, onHide, onShown, onHidden — точечные реакции на изменение состояния.
  • interactive и delay — улучшение UX при взаимодействии и плавность появления.

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

Оглавление