Использование с ванильным JavaScript

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

  1. Через 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>
  1. Через npm (для сборщиков вроде Webpack или Vite)
npm install tippy.js @popperjs/core
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

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

Инициализация подсказки

Самый простой способ создать подсказку:

tippy('#myButton', {
  content: 'Это подсказка!',
});
  • #myButton — селектор элемента, к которому привязывается подсказка.
  • content — текст или HTML-содержимое подсказки.

Если требуется несколько элементов с одинаковыми подсказками, можно использовать класс:

tippy('.tooltip', {
  content: 'Универсальная подсказка',
});

Tippy.js автоматически применяет подсказки ко всем элементам, соответствующим селектору.

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

Позиционирование управляется свойством placement:

tippy('#myButton', {
  content: 'Подсказка сверху',
  placement: 'top',   // top, bottom, left, right, auto
});

Триггеры событий задаются через trigger:

tippy('#myButton', {
  content: 'Наведите или кликните',
  trigger: 'mouseenter focus click', // комбинация событий
});

По умолчанию подсказка появляется при наведении мыши (mouseenter) и исчезает при уходе мыши (mouseleave).

Контроль анимации и задержки

Анимации задаются через animation:

tippy('#myButton', {
  content: 'Анимированная подсказка',
  animation: 'scale',   // scale, shift-away, shift-toward, fade
});

Задержка появления и скрытия:

tippy('#myButton', {
  content: 'Подсказка с задержкой',
  delay: [500, 200],  // [появление, скрытие] в миллисекундах
});
  • Первый параметр массива — задержка перед показом.
  • Второй — задержка перед скрытием.

Использование HTML-содержимого

Подсказки могут содержать сложную HTML-разметку:

tippy('#myButton', {
  content: `
    <div>
      <strong>Заголовок</strong>
      <p>Подробное описание подсказки</p>
    </div>
  `,
  allowHTML: true,
});

Важно включать allowHTML: true, иначе HTML будет экранирован и показан как текст.

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

При необходимости можно работать с экземплярами подсказок напрямую:

const instance = tippy('#myButton', {
  content: 'Управляемая подсказка',
})[0];

// Показ подсказки программно
instance.show();

// Скрытие подсказки
instance.hide();

// Обновление содержимого
instance.setContent('Новое содержимое');

// Удаление подсказки
instance.destroy();

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

Группировка и делегирование

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

import { createSingleton } from 'tippy.js';

const tooltips = tippy('.tooltip', { animation: 'scale' });
const singleton = createSingleton(tooltips, { delay: 200 });

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

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

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

  • Интерактивные подсказки: позволяют взаимодействовать с содержимым, не закрывая его при наведении:
tippy('#myButton', {
  content: '<button>Нажми меня</button>',
  allowHTML: true,
  interactive: true,
});
  • Отслеживание прокрутки и размеров: подсказка автоматически адаптируется к изменению размеров окна:
tippy('#myButton', {
  content: 'Автообновление позиции',
  inertia: true, // плавное движение
  appendTo: document.body,
});
  • Стилизация через CSS-переменные: Tippy.js использует кастомные свойства, например:
.tippy-box {
  --tippy-background: #333;
  --tippy-color: #fff;
  --tippy-arrow-size: 10px;
}

Практические советы

  • Всегда подключать Popper.js перед Tippy.js.
  • Для динамических элементов использовать делегирование, а не повторную инициализацию.
  • Для сложного контента использовать allowHTML и интерактивный режим.
  • Использовать delay и animation для улучшения UX.
  • Контролировать экземпляры подсказок через переменные для программного управления.

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

Оглавление