Изменения в версии 6.x

Версия 6.x библиотеки Tippy.js стала важным этапом эволюции, закрепив переход к более модульной, расширяемой и современной архитектуре. Основное внимание было уделено упрощению API, снижению размера бандла и более тесной интеграции с экосистемой Popper.js.

Ключевое изменение — переход на использование Popper 2 вместо устаревшей версии. Это привело к:

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

Tippy.js теперь выступает как тонкая надстройка над Popper, предоставляя удобный API для работы с тултипами.

Новый подход к импорту и сборке

В версии 6.x изменена стратегия экспорта модулей:

  • Основной пакет стал ESM-first
  • Поддержка tree-shaking значительно улучшена
  • Упрощена работа с bundler’ами (Webpack, Rollup, Vite)

Пример импорта:

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

Дополнительные плагины подключаются отдельно:

import tippy, { followCursor, sticky } from 'tippy.js';

Это позволяет не включать в бандл лишний код.

Плагины как основа расширяемости

В 6.x внедрена полноценная система плагинов. Ранее многие функции были встроены напрямую, теперь они вынесены в отдельные модули.

Примеры встроенных плагинов:

  • followCursor
  • inlinePositioning
  • sticky
  • animateFill

Подключение:

tippy(element, {
  plugins: [followCursor],
  followCursor: true,
});

Преимущества такого подхода:

  • уменьшение размера ядра
  • гибкость настройки
  • возможность создания собственных плагинов

Удаление устаревших опций

В версии 6.x удалены или переработаны устаревшие параметры:

Удалено / изменено Замена / комментарий
arrowType заменено на кастомизацию через CSS
performance больше не требуется
flipBehavior заменено на Popper modifiers
boundary теперь задаётся через Popper

Пример новой настройки через Popper:

tippy(element, {
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['bottom', 'right'],
        },
      },
    ],
  },
});

Улучшенная система тем

Темы в 6.x стали более гибкими и ориентированными на CSS:

tippy(element, {
  theme: 'light-border',
});

Основные изменения:

  • темы больше не привязаны к JS
  • полностью управляются через CSS-классы
  • проще кастомизировать

Пример:

.tippy-box[data-theme~='custom'] {
  background-color: #333;
  color: #fff;
}

Новая модель жизненного цикла

Жизненный цикл тултипа был переработан. Добавлены новые хуки и изменено поведение существующих:

Основные события:

  • onCreate
  • onShow
  • onMount
  • onShown
  • onHide
  • onHidden
  • onDestroy

Пример:

tippy(element, {
  onShow(instance) {
    console.log('Показ тултипа');
  },
});

Изменения:

  • события стали более предсказуемыми
  • улучшена синхронизация с анимациями
  • устранены гонки состояний

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

В 6.x улучшена работа с динамическим содержимым:

tippy(element, {
  content: () => fetchData(),
});

Также появилась возможность обновления контента:

instance.setContent('Новое содержимое');

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

  • поддержка функций как источника контента
  • корректная работа с async-данными
  • отсутствие лишних перерисовок

Работа с виртуальными элементами

Добавлена поддержка виртуальных элементов — объектов, не являющихся DOM-узлами:

tippy({
  getBoundingClientRect: () => ({
    width: 100,
    height: 20,
    top: 100,
    left: 100,
    right: 200,
    bottom: 120,
  }),
}, {
  content: 'Виртуальный тултип',
});

Это полезно для:

  • canvas-интерфейсов
  • SVG
  • кастомных рендереров

Улучшения анимаций

Анимации стали более управляемыми и основанными на CSS:

tippy(element, {
  animation: 'scale',
});

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

  • удалена зависимость от JavaScript-анимаций
  • плавная интеграция с CSS transitions
  • возможность полного кастомного управления

Lazy initialization

Тултипы теперь создаются лениво:

  • экземпляр Popper создаётся только при первом показе
  • снижена нагрузка при инициализации

Это особенно важно при работе с большим количеством элементов:

tippy('.button', {
  content: 'Tooltip',
});

Даже при сотнях элементов производительность остаётся высокой.

Изменения в поведении по умолчанию

Некоторые значения по умолчанию были пересмотрены:

  • delay стал более нейтральным
  • interactive работает стабильнее
  • placement чаще корректируется автоматически через Popper

Это уменьшает необходимость ручной настройки.

Улучшенная типизация (TypeScript)

Версия 6.x значительно улучшила поддержку TypeScript:

  • точные типы для всех опций
  • автодополнение в IDE
  • строгая типизация экземпляров

Пример:

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

let instance: Instance = tippy(element);

Управление экземплярами

API для работы с экземплярами стал более строгим и удобным:

const instance = tippy(element);

instance.show();
instance.hide();
instance.destroy();

Добавлены:

  • setProps
  • setContent

Пример:

instance.setProps({
  placement: 'right',
});

Headless режим

Добавлена возможность использования Tippy без встроенной разметки:

import tippy from 'tippy.js/headless';

Это позволяет:

  • полностью контролировать DOM
  • интегрировать с React, Vue, Svelte
  • создавать кастомные тултипы

Accessibility улучшения

В 6.x уделено внимание доступности:

  • корректная работа с ARIA-атрибутами
  • улучшенная поддержка клавиатуры
  • предсказуемое поведение фокуса

Пример:

tippy(element, {
  aria: {
    content: 'describedby',
  },
});

Итоговые особенности версии 6.x

  • переход на Popper 2
  • модульная система плагинов
  • улучшенная производительность
  • упрощённый API
  • расширяемость и кастомизация
  • современный подход к сборке и типизации

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

Оглавление