Deprecated функции

Понятие устаревания API

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

Основные причины устаревания:

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

Использование deprecated-функций может привести к:

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

Устаревшие параметры конфигурации

arrowType

Ранее использовался для задания типа стрелки:

tippy(element, {
  arrow: true,
  arrowType: 'sharp'
});

Проблема заключалась в ограниченности вариантов и сложности кастомизации.

Современная альтернатива

Использование свойства arrow с передачей HTML или SVG:

tippy(element, {
  arrow: `<svg>...</svg>`
});

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

  • полностью контролировать внешний вид
  • использовать кастомные SVG
  • применять стили через CSS

animateFill

Параметр отвечал за анимацию заливки tooltip:

tippy(element, {
  animateFill: true
});

Данный механизм был привязан к отдельному CSS-плагину и усложнял систему анимаций.

Современный подход

Использование CSS-анимаций и свойства animation:

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

Преимущества:

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

performance

Использовался для оптимизации при большом количестве tooltip-элементов:

tippy('.btn', {
  performance: true
});

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

Причина устаревания

Оптимизация была встроена в ядро библиотеки и стала автоматической.

Современное поведение

Tippy.js теперь:

  • лениво инициализирует элементы
  • автоматически управляет жизненным циклом
  • не требует ручной оптимизации

Устаревшие методы экземпляра

destroyAll()

Ранее использовался для удаления всех tooltip:

tippy.destroyAll();

Проблемы

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

Современная альтернатива

Работа с конкретными экземплярами:

instance.destroy();

или хранение ссылок:

const instances = tippy('.btn');

instances.forEach(instance => instance.destroy());

enable() / disable() (в старом контексте)

Ранее методы могли применяться глобально или без привязки к конкретному экземпляру.

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

instance.disable();
instance.enable();

Это обеспечивает:

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

Устаревшие подходы к инициализации

Автоматическое связывание через data-tippy-*

Ранее библиотека активно полагалась на атрибуты:

<button data-tippy-content="Подсказка"></button>

Инициализация:

tippy('[data-tippy-content]');

Ограничения

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

Современный подход

Явная конфигурация через Jav * aScript:

tippy(element, {
  content: 'Подсказка'
});

Преимущества:

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

Устаревшие плагины

followCursor (ранние версии)

Ранее реализовывался как отдельный плагин с нестабильным API.

Современная версия:

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

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

Изменения:

  • строгая модульная система
  • явное подключение плагинов
  • улучшенная типизация

sticky

Использовался для “прилипания” tooltip к элементу при изменении позиции.

Причина устаревания:

  • нестабильная работа при скролле
  • конфликты с Popper.js

Современная альтернатива — использование возможностей позиционирования Popper.js напрямую.

Изменения в событиях

Устаревшие callbacks

Ранее использовались устаревшие хуки:

tippy(element, {
  onShow(instance) {},
  onHide(instance) {}
});

Хотя сами по себе они не удалены, их сигнатура и поведение были изменены.

Обновлённый формат

Callbacks теперь:

  • получают расширенный контекст
  • работают синхронно и асинхронно
  • поддерживают отмену через return false
tippy(element, {
  onShow(instance) {
    if (!instance.state.isEnabled) {
      return false;
    }
  }
});

Устаревшие стили и темы

theme: 'light-border' и подобные

Ранее библиотека поставляла набор встроенных тем.

Недостатки:

  • ограниченность
  • трудность кастомизации
  • зависимость от CSS библиотеки

Современный подход

Создание собственных тем:

tippy(element, {
  theme: 'custom'
});
.tippy-box[data-theme~='custom'] {
  background-color: #222;
  color: #fff;
}

Устаревшие способы работы с содержимым

Передача DOM-узлов без клонирования

Ранее:

tippy(element, {
  content: document.querySelector('#template')
});

Это приводило к:

  • перемещению элемента в DOM
  • неожиданным побочным эффектам

Современное решение

Использование функции:

tippy(element, {
  content(reference) {
    return reference.getAttribute('data-template');
  }
});

или клонирование:

content: () => template.cloneNode(true)

Устаревшие зависимости и интеграции

Прямая зависимость от Popper.js v1

Ранние версии Tippy.js использовали Popper.js v1, что ограничивало:

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

Современные версии используют Popper v2 с:

  • улучшенной системой модификаторов
  • высокой точностью
  • гибкой настройкой

Практика миграции с устаревших API

Общие рекомендации

  1. Удаление deprecated-параметров
  2. Переход на явную инициализацию
  3. Использование плагинов нового формата
  4. Обновление стилей
  5. Проверка поведения при обновлении версии

Пример миграции

До:

tippy('.btn', {
  arrowType: 'sharp',
  animateFill: true,
  performance: true
});

После:

tippy('.btn', {
  arrow: `<svg>...</svg>`,
  animation: 'scale'
});

Влияние устаревших функций на поддержку проекта

Использование deprecated API:

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

Современный код на Tippy.js строится вокруг:

  • модульности
  • явного управления экземплярами
  • гибкой конфигурации
  • минимизации “магии”

Это делает библиотеку более предсказуемой и удобной для масштабирования.

Оглавление