Основные возможности

Для начала необходимо подключить библиотеку 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 или yarn:

npm install tippy.js @popperjs/core
# или
yarn add tippy.js @popperjs/core

После установки импортируем в Jav * aScript:

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

Создание простых тултипов

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

tippy('#myButton', {
  content: 'Простой тултип',
});

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

  • content — текст или HTML, который отображается внутри тултипа.
  • Можно передавать селектор, DOM-элемент или массив элементов.
tippy('.tooltip', {
  content: 'Подсказка для всех элементов с классом tooltip',
});

Настройка позиции и поведения

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

  • placement: 'top', 'bottom', 'left', 'right' и их комбинации 'top-start', 'bottom-end' и т.д.
  • offset: смещение тултипа относительно цели, [x, y].
  • arrow: отображение стрелки, можно передавать true или объект с настройками.

Пример:

tippy('#myButton', {
  content: 'Тултип с кастомным позиционированием',
  placement: 'right',
  arrow: true,
  offset: [0, 10],
});

Стилизация и темы

Tippy.js поддерживает темы, которые позволяют изменять внешний вид тултипов.

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

tippy('#myButton', {
  content: 'Тултип с темой',
  theme: 'custom',
});

CSS для темы:

.tippy-box[data-theme~='custom'] {
  background-color: #333;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  padding: 6px 10px;
}

Можно использовать встроенные темы light, dark, material, а также создавать свои.

Контроль триггеров

Tippy.js позволяет управлять событиями, при которых тултип появляется и скрывается. Основные опции:

  • trigger: 'mouseenter focus' (по умолчанию), 'click', 'manual'.
  • interactive: true для взаимодействия с контентом тултипа (например, кнопки внутри).

Пример тултипа с кликом:

tippy('#myButton', {
  content: 'Тултип по клику',
  trigger: 'click',
  interactive: true,
});

Анимации

Tippy.js поддерживает анимации появления/исчезновения:

  • Встроенные: 'fade', 'scale', 'shift-away', 'shift-toward'.
  • Пользовательские анимации через CSS.

Пример:

tippy('#myButton', {
  content: 'Анимированный тултип',
  animation: 'scale',
  duration: [300, 250], // [появление, исчезновение]
});

Контент тултипа

Tippy.js позволяет использовать не только текст, но и HTML-контент:

tippy('#myButton', {
  content: '<strong>Жирный текст</strong> и <em>курсив</em>',
  allowHTML: true,
});
  • allowHTML: true разрешает вставку HTML.
  • Можно передавать функции для динамического контента:
tippy('#myButton', {
  content: () => `Сейчас: ${new Date().toLocaleTimeString()}`,
});

Интерактивные тултипы

Для создания тултипов с кнопками или формами необходимо использовать:

tippy('#myButton', {
  content: '<button>Кликни меня</button>',
  allowHTML: true,
  interactive: true,
});
  • Опция interactive: true предотвращает закрытие тултипа при наведении на него мышью.
  • Можно комбинировать с delay для плавного закрытия.

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

Функция tippy возвращает массив или объект тултипов, с которыми можно работать:

const tip = tippy('#myButton', {
  content: 'Управляемый тултип',
})[0];

tip.show();   // Показать тултип
tip.hide();   // Скрыть тултип
tip.setContent('Новый контент'); // Изменить контент
tip.destroy(); // Удалить тултип

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

Делегирование

Для большого количества элементов можно использовать делегирование:

tippy.delegate(document.body, {
  target: '.tooltip',
  content: (reference) => reference.getAttribute('data-tooltip'),
});
  • delegate создаёт один тултип для всех элементов с заданным селектором.
  • Экономит ресурсы при работе с динамически создаваемыми элементами.

Расширенные возможности

  • followCursor: тултип следует за курсором.
  • hideOnClick: управляет поведением при клике вне тултипа.
  • sticky: тултип остаётся видимым при перемещении цели.

Пример следования за курсором:

tippy('#myButton', {
  content: 'Следую за курсором',
  followCursor: true,
});
  • Можно комбинировать множество опций для достижения сложного поведения.

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

Оглавление