Туры и onboarding

Для начала работы с Tippy.js необходимо подключить библиотеку к проекту. Существует два основных способа: через CDN и через пакетный менеджер npm или yarn.

Подключение через 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

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

tippy('.button', {
  content: 'Нажмите здесь, чтобы продолжить',
});

Здесь .button — селектор элемента, к которому привязывается тултип, а content задаёт текст подсказки.

Основные опции

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

  • content — текст или HTML-контент тултипа.
  • placement — позиция тултипа относительно целевого элемента: top, bottom, left, right, а также их вариации (top-start, bottom-end).
  • trigger — событие, которое вызывает тултип: mouseenter, click, focus, manual.
  • animation — анимация появления/скрытия: fade, scale, shift-away, perspective.
  • delay — задержка в миллисекундах перед показом/скрытием.
  • interactive — если true, тултип остаётся открытым при наведении мыши на него.
  • theme — возможность создания кастомных стилей через CSS-классы.

Пример с дополнительными настройками:

tippy('.button', {
  content: 'Нажмите для продолжения',
  placement: 'bottom',
  animation: 'scale',
  delay: [200, 100],
  interactive: true,
  theme: 'light',
});

Работа с HTML-контентом

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

tippy('.info', {
  content: '<strong>Важно:</strong> следуйте инструкциям',
  allowHTML: true,
  placement: 'right',
});

Можно вставлять сложные элементы, например формы или кнопки:

tippy('.menu-item', {
  content: document.querySelector('#tooltip-template').innerHTML,
  allowHTML: true,
  interactive: true,
});

Где #tooltip-template — скрытый блок с HTML-контентом:

<div id="tooltip-template" style="display: none;">
  <p>Выберите опцию:</p>
  <button>Подтвердить</button>
</div>

Стратегии для туров и onboarding

Tippy.js идеально подходит для пошаговых инструкций в интерфейсе. Для организации тура:

  1. Создание массива шагов
const tourSteps = [
  { selector: '.step1', content: 'Это главное меню', placement: 'bottom' },
  { selector: '.step2', content: 'Здесь можно редактировать профиль', placement: 'right' },
  { selector: '.step3', content: 'Не забудьте сохранить изменения', placement: 'top' },
];
  1. Инициализация тултипов
let currentStep = 0;
let tippyInstance;

function showStep(stepIndex) {
  if (tippyInstance) tippyInstance.destroy();

  const step = tourSteps[stepIndex];
  const element = document.querySelector(step.selector);

  tippyInstance = tippy(element, {
    content: step.content,
    placement: step.placement,
    showOnCreate: true,
    interactive: true,
    hideOnClick: false,
  });

  tippyInstance.show();
}
  1. Навигация по шагам
document.querySelector('#next').addEventListener('click', () => {
  currentStep++;
  if (currentStep < tourSteps.length) {
    showStep(currentStep);
  } else {
    tippyInstance.destroy();
  }
});

Такой подход позволяет создавать поэтапные туры, которые сопровождают пользователя через интерфейс, не перегружая его информацией.

Кастомизация внешнего вида

Tippy.js поддерживает кастомные темы через CSS. Пример создания темы для тура:

.tippy-box[data-theme~='onboarding'] {
  background-color: #ffffff;
  color: #333;
  border: 2px solid #007bff;
  border-radius: 8px;
  font-size: 14px;
  padding: 10px 15px;
}

.tippy-box[data-theme~='onboarding'][data-placement^='top'] > .tippy-arrow {
  color: #007bff;
}

И применение:

tippy('.step1', {
  content: 'Начало тура',
  theme: 'onboarding',
  placement: 'bottom',
});

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

  • События тултипов Tippy.js предоставляет хуки: onShow, onHide, onCreate, которые позволяют отслеживать и управлять состоянием тура:
tippy('.step1', {
  content: 'Проверка событий',
  onShow(instance) { console.log('Показан шаг 1'); },
  onHide(instance) { console.log('Скрыт шаг 1'); },
});
  • Привязка к динамическим элементам Если элементы появляются после загрузки страницы, можно использовать делегирование:
tippy.delegate(document.body, {
  target: '.dynamic-button',
  content: 'Динамический элемент',
});
  • Совмещение с модальными окнами и popovers Tippy.js можно комбинировать с кастомными оверлеями, чтобы создавать сложные интерактивные подсказки для onboarding.

Практические рекомендации

  • Использовать interactive: true для элементов, требующих взаимодействия.
  • Настраивать delay, чтобы тултипы не мелькали при быстром наведении.
  • Сохранять состояние текущего шага в локальном хранилище, если тур можно прервать и возобновить.
  • Разделять HTML-контент тултипов на шаблоны, чтобы облегчить поддержку и перевод интерфейса.

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

Оглавление