Инициализация на одном элементе

Для работы с Tippy.js необходимо подключить библиотеку. Обычно используются два основных способа: через CDN или через пакетный менеджер npm/yarn. При использовании CDN подключаются два файла: CSS для стилей и JS для логики тултипов:

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

Если проект использует сборщики типа Webpack или Vite, рекомендуется установка через npm:

npm install tippy.js

После установки импортируются необходимые модули:

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

Создание тултипа на одном элементе

Для инициализации тултипа на конкретном элементе используется функция tippy, где первым аргументом передается элемент, а вторым объект конфигурации:

const button = document.querySelector('#myButton');

tippy(button, {
  content: 'Привет, я тултип!',
});

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

  • content — обязательное свойство, задающее текст тултипа. Оно может быть строкой или функцией, возвращающей строку.
  • Первый аргумент может быть DOM-элементом, NodeList или CSS-селектором. Для одного элемента рекомендуется использовать querySelector.

Настройка позиции и триггера

Tippy.js по умолчанию располагает тултип сверху элемента при наведении. Для изменения позиции используется свойство placement:

tippy(button, {
  content: 'Я снизу!',
  placement: 'bottom',
});

Доступные позиции: top, bottom, left, right, а также комбинированные top-start, top-end и аналогично для остальных сторон.

Триггеры появления можно настраивать через trigger:

tippy(button, {
  content: 'Появляюсь при клике',
  trigger: 'click',
});

Поддерживаемые значения: mouseenter (по умолчанию), click, focus, manual. Можно комбинировать через пробел, например: mouseenter focus.

Изменение задержки появления и исчезновения

Свойство delay управляет временем появления и скрытия тултипа в миллисекундах. Его можно задать как число или массив [появление, скрытие]:

tippy(button, {
  content: 'С задержкой',
  delay: [500, 200], // 0.5 сек на появление, 0.2 сек на скрытие
});

Анимации и тема

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

tippy(button, {
  content: 'С анимацией',
  animation: 'scale', // доступные: 'fade', 'scale', 'shift-away', 'perspective'
});

Темы позволяют менять внешний вид тултипа. Для одного элемента достаточно задать theme:

tippy(button, {
  content: 'Тёмная тема',
  theme: 'dark',
});

Tippy.js поставляется с дефолтной темой, но можно создавать кастомные, подключая CSS:

.tippy-box[data-theme~='custom'] {
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  padding: 6px 10px;
}
tippy(button, {
  content: 'Кастомная тема',
  theme: 'custom',
});

Использование HTML-контента

Tippy.js позволяет вставлять сложный HTML вместо простого текста, используя свойство allowHTML:

tippy(button, {
  content: '<strong>Жирный текст</strong> с <em>курсивом</em>',
  allowHTML: true,
});

Важно: при использовании HTML стоит быть осторожным с внешними данными, чтобы избежать XSS-уязвимостей.

Методы управления тултипом

При инициализации tippy возвращает экземпляр тултипа, с которым можно взаимодействовать программно:

const tip = tippy(button, { content: 'Привет!' });

// Открыть тултип
tip.show();

// Закрыть тултип
tip.hide();

// Полностью уничтожить тултип
tip.destroy();

Динамическое обновление контента

Свойство setContent позволяет менять содержимое после инициализации:

tip.setContent('Новый текст тултипа');

Это полезно для элементов, где контент меняется в зависимости от состояния интерфейса.

Поддержка интерактивности

Для тултипов, содержащих кнопки или ссылки, важно сделать их интерактивными:

tippy(button, {
  content: '<button>Нажми меня</button>',
  allowHTML: true,
  interactive: true,
});

Свойство interactive: true предотвращает закрытие тултипа при наведении курсора на его содержимое.

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

Оглавление