Использование anime.js и других библиотек

Для использования Tippy.js необходимо подключить саму библиотеку и её зависимости. Базовые варианты подключения:

Через CDN:

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css">
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

Через npm:

npm install tippy.js @popperjs/core

В коде Jav * aScript:

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

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

Инициализация и базовое использование

Для создания всплывающей подсказки достаточно указать селектор элемента и передать строку с текстом:

tippy('#myButton', {
  content: 'Нажмите здесь для действия'
});

Ключевые параметры:

  • content — содержимое тултипа, может быть текстом или HTML-элементом.
  • placement — позиция относительно целевого элемента (top, bottom, left, right и их комбинации).
  • trigger — событие, которое вызывает тултип (mouseenter, click, focus).
  • arrow — добавление стрелки (true/false).
  • animation — стандартная анимация (shift-away, fade, scale).

Расширенные настройки

Работа с HTML и интерактивность

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

tippy('#myButton', {
  content: document.querySelector('#tooltipContent'),
  allowHTML: true,
  interactive: true,
});
  • allowHTML: true — позволяет вставлять HTML внутри тултипа.
  • interactive: true — позволяет взаимодействовать с контентом тултипа (кнопки, ссылки, формы).

Позиционирование и смещение

Можно тонко настраивать положение через placement и offset:

tippy('#myButton', {
  content: 'Подсказка с отступом',
  placement: 'right-start',
  offset: [10, 20], // [skidding, distance]
});
  • Skidding — смещение по горизонтали.
  • Distance — расстояние от целевого элемента.

Использование с анимацией anime.js

Tippy.js поддерживает кастомные анимации через функцию animateFill или напрямую через onShow и onHide. Подключение anime.js открывает возможности сложной анимации.

import anime from 'animejs/lib/anime.es.js';

tippy('#myButton', {
  content: 'Анимированная подсказка',
  onShow(instance) {
    anime({
      targets: instance.popper,
      opacity: [0, 1],
      translateY: [-10, 0],
      duration: 500,
      easing: 'easeOutQuad'
    });
  },
  onHide(instance) {
    anime({
      targets: instance.popper,
      opacity: [1, 0],
      translateY: [0, -10],
      duration: 300,
      easing: 'easeInQuad'
    });
  }
});
  • onShow и onHide позволяют полностью контролировать анимацию появления и скрытия тултипа.
  • Любые параметры anime.js (translateX, scale, rotate) могут применяться к тултипу.

Множественные тултипы и делегирование

Tippy.js поддерживает инициализацию сразу на нескольких элементах и делегирование событий:

tippy('.buttons', {
  content: 'Кнопка',
  placement: 'top'
});

Делегирование удобно для динамически добавленных элементов:

tippy.delegate(document.body, {
  target: '.dynamic-btn',
  content: 'Динамический тултип',
});
  • delegate экономит ресурсы, создавая один тултип для всех соответствующих элементов.
  • Позволяет работать с элементами, которые появляются после загрузки страницы.

Управление тултипом через API

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

const tip = tippy('#myButton', {
  content: 'Программный контроль'
})[0];

tip.show();  // Показать
tip.hide();  // Скрыть
tip.toggle(); // Переключить
tip.setContent('Новый текст'); // Обновить контент
tip.destroy(); // Удалить тултип
  • Методы полезны для динамического изменения текста или состояния подсказки.
  • Можно комбинировать с событиями интерфейса или результатами AJAX-запросов.

Темизация и кастомизация стилей

Tippy.js позволяет использовать CSS-классы и темы:

tippy('#myButton', {
  content: 'Тема Dark',
  theme: 'dark',
});

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

.tippy-box[data-theme~='custom'] {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  padding: 8px 12px;
}
tippy('#myButton', {
  content: 'Кастомная тема',
  theme: 'custom',
});
  • Можно подключать разные темы к разным элементам на одной странице.
  • Совместимо с анимацией и интерактивными тултипами.

Использование Tippy.js с другими библиотеками

Tippy.js легко интегрируется с библиотеками типа React, Vue, jQuery и анимационными библиотеками вроде anime.js:

  • React: через компонент @tippyjs/react.
  • Vue: через директиву v-tippy.
  • Любые DOM-элементы, управляемые сторонними скриптами, могут быть источником тултипов.

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

tippy('#animatedBtn', {
  content: 'Анимация при клике',
  trigger: 'click',
  onShow(instance) {
    anime({
      targets: instance.popper,
      scale: [0.8, 1],
      rotate: [10, 0],
      duration: 400,
      easing: 'easeOutElastic(1, .5)'
    });
  }
});

Отложенная и динамическая загрузка контента

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

tippy('#userBtn', {
  content: 'Загрузка...',
  onShow(instance) {
    fetch('/api/user/123')
      .then(res => res.text())
      .then(data => {
        instance.setContent(data);
      });
  }
});
  • Позволяет использовать Tippy.js для динамического контента без предварительной генерации HTML.
  • Сохраняется плавность анимации при обновлении текста.

Итоговые возможности

Tippy.js сочетает в себе:

  • Простоту базового использования.
  • Гибкость позиционирования и кастомизации.
  • Возможность интеграции с anime.js и другими библиотеками для создания сложных анимаций.
  • Программный контроль через API и поддержку делегирования для динамических элементов.
  • Использование HTML, интерактивного контента и темизации для уникального дизайна интерфейса.

Эта библиотека подходит как для небольших подсказок, так и для сложных, анимированных интерактивных элементов интерфейса.

Оглавление