Программный вызов

Tippy.js предоставляет гибкий API для создания всплывающих подсказок (tooltip) через программный вызов, что позволяет динамически управлять их поведением без привязки к HTML-атрибутам data-tippy-content.

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

Создание всплывающей подсказки

Базовый способ программного создания подсказки выглядит следующим образом:

const button = document.querySelector('#myButton');

const tip = tippy(button, {
  content: 'Привет, я подсказка!',
  placement: 'top',       // положение относительно элемента
  arrow: true,            // отображение стрелки
  animation: 'scale',     // анимация появления
});

Ключевые моменты:

  • content – текст или HTML, который будет отображаться внутри тултипа.
  • placement – допустимые значения: 'top', 'bottom', 'left', 'right' и их варианты с -start / -end.
  • arrow – включает/отключает стрелку.
  • animation – контролирует эффект появления (fade, scale, shift-away и другие).

Использование нескольких элементов

Tippy.js позволяет создать подсказки для коллекций элементов:

const buttons = document.querySelectorAll('.info-btn');

tippy(buttons, {
  content: 'Общая подсказка для всех кнопок',
  delay: [100, 200],   // задержка появления и скрытия в мс
  theme: 'light',      // тема подсказки
});

Особенности:

  • Массив NodeList автоматически итерируется.
  • Параметры применяются ко всем элементам, но при необходимости их можно менять индивидуально через методы экземпляра.

Динамическое управление экземплярами

Созданный тултип возвращает объект с методами управления:

const tipInstance = tippy(button, { content: 'Управляемая подсказка' })[0];

tipInstance.show();   // показать подсказку
tipInstance.hide();   // скрыть подсказку
tipInstance.toggle(); // переключение видимости
tipInstance.setContent('Новый текст'); // обновление контента
tipInstance.destroy(); // удаление тултипа

Методы, на которые стоит обратить внимание:

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

Программная настройка через createSingleton

Для группировки нескольких подсказок в один экземпляр с общей логикой:

const tips = tippy('.btn', {
  content: 'Кнопка',
  trigger: 'mouseenter focus',
});

const singleton = tippy.createSingleton(tips, {
  delay: 200,
  moveTransition: 'transform 0.2s ease-out',
});

Особенности:

  • Позволяет объединять несколько тултипов в один экземпляр.
  • Общие параметры (задержка, анимация) применяются ко всем тултипам группы.
  • Экономит ресурсы при большом количестве элементов.

Использование виртуальных элементов

Tippy.js позволяет привязывать подсказку к виртуальному элементу, который не существует в DOM:

const virtualReference = {
  getBoundingClientRect: () => ({
    width: 100,
    height: 50,
    top: 200,
    bottom: 250,
    left: 300,
    right: 400,
  }),
  clientWidth: 100,
  clientHeight: 50,
};

tippy(virtualReference, {
  content: 'Подсказка для виртуального объекта',
  trigger: 'manual',
  placement: 'right',
}).show();

Применение виртуальных элементов удобно для:

  • Подсказок в графиках и канвасах.
  • Отображения информации над динамически вычисленными координатами.

Программные события тултипа

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

tippy(button, {
  content: 'События',
  onShow(instance) {
    console.log('Подсказка показана', instance);
  },
  onHide(instance) {
    console.log('Подсказка скрыта', instance);
  },
  onMount(instance) {
    console.log('Подсказка смонтирована в DOM', instance.popper);
  },
});

Доступные события:

  • onShow / onShown
  • onHide / onHidden
  • onMount / onUntrigger
  • onTrigger / onUntrigger

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

Поддержка динамического контента

Программный вызов позволяет использовать функции для генерации контента:

tippy(button, {
  content: () => `Сейчас: ${new Date().toLocaleTimeString()}`,
  allowHTML: false,
  interactive: false,
});

Особенности:

  • Контент вычисляется при каждом показе подсказки.
  • allowHTML: true позволяет вставлять HTML-код, но требует осторожности с безопасностью.

Настройка позиции и смещения

С помощью параметров offset и popperOptions можно тонко настраивать расположение:

tippy(button, {
  content: 'Смещение подсказки',
  placement: 'bottom',
  offset: [0, 20], // смещение по X и Y
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        options: { fallbackPlacements: ['top', 'right'] },
      },
    ],
  },
});
  • offset задаёт смещение от стандартной позиции.
  • popperOptions.modifiers позволяет использовать мощь библиотеки Popper.js для адаптивного позиционирования.

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

Оглавление