Условное отображение

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

Опция visible и её динамическое управление

Tippy.js позволяет управлять видимостью через свойство visible. Оно может принимать логическое значение true или false и задавать начальное состояние тултипа. Для условного отображения это свойство часто используется совместно с внешними условиями:

const isEnabled = true;

const tooltip = tippy('#myButton', {
  content: 'Активная подсказка',
  visible: isEnabled,
});

Здесь тултип будет виден только если переменная isEnabled равна true. При изменении состояния элемента видимость можно обновлять динамически с помощью методов тултипа:

if (shouldShowTooltip) {
  tooltip.show();
} else {
  tooltip.hide();
}

Методы show(), hide() и toggle() дают полный контроль над отображением подсказки в зависимости от условий.

Использование onShow и onMount для проверки условий

Tippy.js предоставляет хук onShow, который вызывается перед отображением тултипа. Возврат false из этой функции предотвращает показ:

tippy('#myButton', {
  content: 'Проверка условий',
  onShow(instance) {
    if (!instance.props.shouldDisplay) {
      return false;
    }
  },
  shouldDisplay: true,
});

Аналогично, хук onMount позволяет выполнить действия после того, как тултип был добавлен в DOM, что полезно для подгрузки динамического контента:

tippy('#myButton', {
  content: 'Динамический контент',
  onMount(instance) {
    if (instance.props.loadData) {
      fetch('/api/info')
        .then(res => res.text())
        .then(data => instance.setContent(data));
    }
  },
  loadData: true,
});

Условное отображение через trigger

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

tippy('#myButton', {
  content: 'Наведи или кликни',
  trigger: 'mouseenter focus',
});

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

const tooltip = tippy('#myButton', {
  content: 'Ручное управление',
  trigger: 'manual',
});

document.querySelector('#myButton').addEventListener('click', () => {
  if (someCondition()) {
    tooltip.show();
  } else {
    tooltip.hide();
  }
});

Фильтрация элементов через delegate

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

tippy.delegate(document.body, {
  target: '.has-tooltip',
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
});

С помощью функции target или фильтрации можно реализовать условное отображение только для элементов с определённым состоянием.

Динамический контент и условие отображения

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

const tooltip = tippy('#myButton', {
  content: 'Загрузка...',
});

document.querySelector('#myButton').addEventListener('mouseenter', () => {
  if (isDataReady()) {
    tooltip.setContent('Данные готовы');
    tooltip.show();
  } else {
    tooltip.hide();
  }
});

Применение кастомных условий через функции

Для полной гибкости можно использовать функции при вычислении свойства content или проверке условий в хуках:

tippy('#myButton', {
  content(reference) {
    return reference.dataset.active === 'true' ? 'Активен' : '';
  },
  onShow(instance) {
    return instance.reference.dataset.active === 'true';
  },
});

Таким образом, тултип появляется только если элемент имеет атрибут data-active="true".

Использование popperOptions для условного позиционирования

Иногда условное отображение связано не только с самим показом, но и с позиционированием тултипа. Параметр popperOptions позволяет на лету менять стратегию позиционирования или смещения, что может повлиять на видимость:

tippy('#myButton', {
  content: 'Позиционирование',
  popperOptions: {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 20],
        },
      },
    ],
  },
});

В сочетании с onShow можно динамически изменять смещение в зависимости от состояния страницы или элемента.

События для условного управления

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

  • onShow — перед показом, можно отменить.
  • onHide — перед скрытием, можно отменить.
  • onMount — после добавления тултипа в DOM.
  • onUntrigger — при потере триггерного события.

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

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

Оглавление