Расширение базового функционала

Tippy.js позволяет не ограничиваться простым текстовым контентом и использовать HTML, шаблоны и динамически обновляемый контент. Для этого в конфигурации указывается параметр content, который может принимать строку, DOM-элемент или функцию, возвращающую контент:

tippy('#button', {
  content: () => `<strong>${new Date().toLocaleTimeString()}</strong>`,
  allowHTML: true,
});

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

  • allowHTML: true обязательно, если используется HTML-контент.
  • Функция позволяет создавать динамически обновляемый контент, например, текущую дату, статус элемента или данные с сервера.
  • DOM-элементы можно вставлять напрямую, что обеспечивает полную свободу в оформлении тултипа.

Использование тем и кастомного оформления

Tippy.js поддерживает темы, которые позволяют управлять стилем тултипов глобально или локально. Встроенные темы включают light, dark, material, но можно создавать собственные CSS-классы:

tippy('#info', {
  content: 'Информация',
  theme: 'custom-theme'
});

CSS для custom-theme:

.tippy-box[data-theme~='custom-theme'] {
  background-color: #2c3e50;
  color: #ecf0f1;
  border-radius: 8px;
  padding: 10px 15px;
  font-size: 14px;
}

Особенности кастомизации:

  • Селектор [data-theme~='имя'] позволяет точно таргетировать тултипы по теме.
  • Можно изменять не только цвет и фон, но и анимации, тени и размеры стрелки.

Контроль позиции и границ

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

tippy('#menu', {
  content: 'Меню',
  placement: 'right-start',
  boundary: document.querySelector('#container')
});
  • placement задает сторону и вариант выравнивания тултипа.
  • boundary предотвращает выход тултипа за пределы контейнера.
  • Дополнительно можно использовать flip: true для автоматического переворота тултипа при нехватке места.

Поддержка интерактивных тултипов

Для сложных элементов, содержащих кнопки или ссылки, включается опция interactive: true. Это позволяет пользователю взаимодействовать с содержимым тултипа без его закрытия при наведении:

tippy('#dropdown', {
  content: document.querySelector('#tooltip-content'),
  interactive: true,
  trigger: 'mouseenter focus',
});

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

  • Можно комбинировать с кастомными событиями trigger.
  • Для динамического содержимого можно использовать onShow и onHide, чтобы подгружать данные или управлять состоянием интерфейса.

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

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

const tip = tippy('#dynamic', {
  content: 'Стартовое сообщение'
});

tip[0].setContent('Обновленный текст');
tip[0].show();
tip[0].hide();
tip[0].destroy();
  • setContent() позволяет менять контент на лету.
  • show() и hide() контролируют отображение вручную.
  • destroy() удаляет тултип, освобождая ресурсы.

Анимации и кастомные эффекты

Tippy.js предлагает стандартные анимации (shift-away, fade, scale) и возможность создания собственных с помощью CSS:

tippy('#animate', {
  content: 'Анимация кастом',
  animation: 'my-fade',
  duration: [300, 300]
});

CSS-анимация:

@keyframes my-fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes my-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

.tippy-box[data-animation~='my-fade'][data-state='visible'] {
  animation: my-fade-in 0.3s forwards;
}

.tippy-box[data-animation~='my-fade'][data-state='hidden'] {
  animation: my-fade-out 0.3s forwards;
}
  • Анимации задаются отдельным ключом animation и состоянием data-state.
  • Можно настраивать длительность через duration.

Использование плагинов Tippy.js

Tippy.js поддерживает расширения через плагины. Среди популярных:

  • followCursor – тултип следует за курсором.
  • sticky – закрепляет тултип на позиции при скролле.
  • inlinePositioning – используется для элементов внутри inline-block контейнеров.

Пример плагина followCursor:

tippy('#hover', {
  content: 'Следую за курсором',
  plugins: [tippy.plugins.followCursor],
  followCursor: true
});
  • Плагины подключаются через plugins и требуют настройки соответствующих опций.
  • Комбинирование нескольких плагинов позволяет создавать сложные интерактивные интерфейсы.

События и хуки

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

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

Пример динамической подгрузки данных:

tippy('#user', {
  content: 'Загрузка...',
  onShow(instance) {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => instance.setContent(data.name));
  }
});
  • События позволяют управлять состоянием тултипа в зависимости от внешних факторов.
  • Можно комбинировать с асинхронными вызовами и анимациями для максимально динамичного поведения.
Оглавление