Инициализация базового тура

Для начала работы с Intro.js необходимо подключить саму библиотеку и стили. Обычно это делается через CDN или установку через npm.

Через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>

Через npm:

npm install intro.js
import introJs from 'intro.js';
import 'intro.js/introjs.css';

После подключения библиотеки становится доступен объект introJs(), который используется для создания и управления интерактивным туром.

Инициализация базового тура

Создание базового тура сводится к вызову функции introJs() и последующей настройке шагов:

const tour = introJs();

tour.setOptions({
  steps: [
    {
      element: '#step1',
      intro: 'Это первый шаг вашего тура.',
      position: 'bottom'
    },
    {
      element: '#step2',
      intro: 'Здесь можно показать важный элемент интерфейса.',
      position: 'right'
    },
    {
      element: '#step3',
      intro: 'Финальный шаг демонстрирует завершение процесса.',
      position: 'left'
    }
  ],
  showStepNumbers: true,
  showBullets: true,
  exitOnOverlayClick: true,
  exitOnEsc: true
});

tour.start();

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

  • element – селектор DOM-элемента, который будет выделен на шаге.
  • intro – текстовое описание шага, поддерживает HTML-разметку.
  • position – позиция подсказки относительно элемента (top, bottom, left, right, auto).
  • showStepNumbers – отображение номера шага.
  • showBullets – отображение точек прогресса.
  • exitOnOverlayClick и exitOnEsc – позволяют закрыть тур кликом по фону или клавишей Esc.

Управление шагами и переходами

Intro.js предоставляет методы для управления туром динамически:

tour.nextStep();      // Переход к следующему шагу
tour.previousStep();  // Переход к предыдущему шагу
tour.goToStep(2);     // Переход к конкретному шагу по номеру
tour.exit();          // Завершение тура

Также возможна обработка событий:

tour.onbeforechange(function(targetElement) {
  console.log('Перед изменением шага:', targetElement.id);
});

tour.onafterchange(function(targetElement) {
  console.log('После изменения шага:', targetElement.id);
});

tour.oncomplete(function() {
  console.log('Тур завершен');
});

tour.onexit(function() {
  console.log('Тур был прерван');
});

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

Автоматическое выделение элементов

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

tour.setOptions({
  steps: [
    {
      element: document.querySelector('.dynamic-element'),
      intro: 'Элемент может появиться позже, но будет автоматически обнаружен.',
      position: 'top'
    }
  ]
});

Intro.js отслеживает наличие элемента в DOM перед показом подсказки. Если элемент отсутствует, шаг пропускается.

Настройка стиля подсказок

Внешний вид подсказок можно изменять через CSS или встроенные опции:

tour.setOptions({
  tooltipClass: 'custom-tooltip',
  highlightClass: 'custom-highlight',
  overlayOpacity: 0.7
});
  • tooltipClass – добавляет CSS-класс к подсказке.
  • highlightClass – класс для выделяемого элемента.
  • overlayOpacity – прозрачность фона, затемняющего страницу.

Пример CSS для кастомизации:

.custom-tooltip {
  background-color: #2b2b2b;
  color: #fff;
  font-size: 16px;
  border-radius: 8px;
  padding: 15px;
}

.custom-highlight {
  box-shadow: 0 0 15px 5px rgba(255, 165, 0, 0.8);
  border-radius: 5px;
}

Пошаговая инициализация с динамическими условиями

Intro.js позволяет создавать туры, шаги которых зависят от состояния приложения:

const steps = [];

if (document.querySelector('#feature1')) {
  steps.push({
    element: '#feature1',
    intro: 'Особенность 1 активна',
    position: 'bottom'
  });
}

if (userHasAccess) {
  steps.push({
    element: '#admin-panel',
    intro: 'Доступен административный интерфейс',
    position: 'right'
  });
}

introJs().setOptions({ steps }).start();

Это обеспечивает гибкость при построении интерактивного обучения для пользователей с разными ролями или настройками интерфейса.

Применение в одностраничных приложениях

В SPA (Single Page Application) шаги тура можно инициировать после рендеринга компонентов:

router.afterEach(() => {
  const tour = introJs();
  tour.setOptions({
    steps: [
      {
        element: '#navbar',
        intro: 'Навигационное меню',
        position: 'bottom'
      }
    ]
  });
  tour.start();
});

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

Итоговые рекомендации по инициализации

  • Всегда указывайте element и intro для каждого шага, иначе тур не будет работать корректно.
  • Используйте события для синхронизации с логикой приложения.
  • Поддерживайте динамические условия, если элементы появляются асинхронно.
  • Настраивайте стили через CSS для единообразного внешнего вида.
  • Проверяйте совместимость с SPA и асинхронными компонентами, чтобы подсказки не показывались на пустых элементах.

Эти принципы позволяют создавать полностью интерактивные и адаптивные туры, обеспечивающие качественный пользовательский опыт.

Оглавление