Обработка generic типов

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

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

tippy('#myButton', {
  content: 'Привет, я подсказка!',
  placement: 'top',
  animation: 'scale',
});

Ключевые параметры конфигурации:

  • content — текст или HTML-контент тултипа.
  • placement — позиция подсказки относительно элемента (top, bottom, left, right).
  • animation — тип анимации появления/исчезновения (fade, scale, shift-away).
  • theme — визуальная тема, которая может быть кастомизирована через CSS.

Tippy.js поддерживает использование HTML-контента, что позволяет внедрять сложные элементы: изображения, кнопки, списки.

tippy('#myButton', {
  content: document.querySelector('#tooltipContent'),
  allowHTML: true,
});

Обработка событий

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

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

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

tippy('#myButton', {
  content: 'Событийный тултип',
  onShow(instance) {
    console.log('Подсказка показывается');
  },
  onHide(instance) {
    console.log('Подсказка скрывается');
  },
});

Динамический контент

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

tippy('#dynamicButton', {
  content(reference) {
    return `Координаты элемента: ${reference.getBoundingClientRect().top}px`;
  },
});

Здесь reference — это DOM-элемент, к которому привязан тултип, что даёт возможность строить подсказку на основе состояния элемента.

Работа с generic типами данных

В TypeScript интеграция Tippy.js требует корректной типизации. Библиотека предоставляет интерфейсы для конфигурационных объектов, позволяя использовать generic-параметры для более точной типизации контента и привязанных элементов.

import tippy, { Instance, Props } from 'tippy.js';

interface CustomContent {
  title: string;
  description: string;
}

const myButton = document.querySelector<HTMLButtonElement>('#myButton');

const tooltip: Instance<Props> = tippy<HTMLElement, CustomContent>(myButton!, {
  content({ title, description }) {
    return `<strong>${title}</strong>: ${description}`;
  },
});
  • Первый generic <HTMLElement> указывает тип элемента, к которому привязан тултип.
  • Второй generic <CustomContent> описывает структуру данных, передаваемых в контент.

Использование generic позволяет полностью контролировать типизацию функций и объектов, что минимизирует ошибки на этапе компиляции и облегчает автодополнение в редакторе.

Управление состоянием тултипа

Tippy.js поддерживает программное управление состоянием тултипа через методы экземпляра:

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

Пример управления:

const tooltipInstance = tippy('#controlButton', {
  content: 'Управляемый тултип',
});

const button = document.querySelector('#toggleTooltip')!;
button.addEventListener('click', () => {
  tooltipInstance[0].toggle();
});

Настройка позиции и поведения

Tippy.js использует Popper.js для позиционирования, что открывает расширенные возможности:

  • placement — базовое позиционирование.
  • offset — смещение относительно элемента.
  • flip — автоматически изменяет позицию, если тултип не помещается в viewport.
  • arrow — добавляет стрелку к тултипу.
tippy('#positionButton', {
  content: 'Тултип с стрелкой и смещением',
  placement: 'right',
  arrow: true,
  offset: [0, 10],
  flip: true,
});

Настройка тем и анимаций

Визуальное оформление Tippy.js полностью кастомизируется через CSS и темы:

tippy('#themeButton', {
  content: 'Тема dark',
  theme: 'dark',
  animation: 'shift-away',
});
  • theme может быть любым классом CSS, где определяется стиль подсказки.
  • animation позволяет комбинировать плавность появления и исчезновения с кастомной визуальной динамикой.

Пример комплексной интеграции

interface TooltipData {
  title: string;
  info: string;
}

const buttons = document.querySelectorAll<HTMLButtonElement>('.info-button');

buttons.forEach(button => {
  tippy<HTMLButtonElement, TooltipData>(button, {
    content({ title, info }) {
      return `<h3>${title}</h3><p>${info}</p>`;
    },
    allowHTML: true,
    placement: 'top',
    theme: 'custom-theme',
    animation: 'scale',
    onShow(instance) {
      console.log('Показан тултип для', instance.reference.id);
    },
  });
});

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

Оглавление