Контекстные туры

Контекстные туры в библиотеке Intro.js позволяют создавать пошаговые интерактивные подсказки для пользователей, сопровождающие элементы интерфейса. Каждый шаг тура привязан к конкретному DOM-элементу и может содержать текстовую подсказку, заголовок, кнопки навигации и дополнительные параметры отображения.

Для начала необходимо подключить Intro.js к проекту:

<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css">
<script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>

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

const tour = introJs();
tour.setOptions({
    steps: [
        {
            element: '#step1',
            intro: 'Это первый шаг тура.'
        },
        {
            element: '#step2',
            intro: 'Следующий шаг с пояснением.'
        }
    ],
    showBullets: true,
    exitOnOverlayClick: false
});
tour.start();

Настройка шагов тура

Каждый шаг можно настраивать следующими ключевыми параметрами:

  • element — CSS-селектор или DOM-элемент, к которому будет привязана подсказка.
  • intro — текст подсказки, который будет отображен пользователю.
  • position — позиция подсказки относительно элемента (top, right, bottom, left, auto).
  • tooltipClass — CSS-класс для стилизации подсказки на конкретном шаге.
  • highlightClass — CSS-класс для подсветки элемента.
  • disableInteraction — блокирует взаимодействие с элементом на данном шаге (по умолчанию false).

Пример с указанием позиции и кастомной подсветки:

tour.setOptions({
    steps: [
        {
            element: '#step1',
            intro: 'Обратите внимание на этот элемент',
            position: 'right',
            highlightClass: 'custom-highlight',
            tooltipClass: 'custom-tooltip',
            disableInteraction: true
        }
    ]
});

Управление навигацией

Intro.js позволяет настраивать поведение кнопок и автоматическую навигацию между шагами:

  • nextLabel — текст кнопки «Далее».
  • prevLabel — текст кнопки «Назад».
  • doneLabel — текст кнопки «Готово».
  • skipLabel — текст кнопки «Пропустить».
  • showStepNumbers — отображение номеров шагов.
tour.setOptions({
    nextLabel: 'Вперед',
    prevLabel: 'Назад',
    doneLabel: 'Завершить',
    skipLabel: 'Пропустить',
    showStepNumbers: true
});

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

  • goToStep(n) — перейти на шаг с индексом n.
  • nextStep() — перейти к следующему шагу.
  • previousStep() — вернуться к предыдущему шагу.
  • exit() — завершить тур в любой момент.

Обработка событий тура

Intro.js предоставляет события, которые позволяют реагировать на действия пользователя:

  • onbeforechange — срабатывает перед отображением нового шага.
  • onafterchange — срабатывает после отображения шага.
  • oncomplete — вызывается при завершении тура.
  • onexit — вызывается при преждевременном выходе из тура.

Пример использования событий:

tour.onbeforechange(function(targetElement) {
    console.log('Переходим к элементу:', targetElement);
});

tour.onafterchange(function(targetElement) {
    console.log('Отобразился шаг для:', targetElement);
});

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

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

Контекстные условия для шагов

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

const steps = [
    {
        element: '#step1',
        intro: 'Первый шаг всегда отображается'
    }
];

if (document.querySelector('#step2')) {
    steps.push({
        element: '#step2',
        intro: 'Второй шаг появляется только если элемент существует'
    });
}

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

Стиль и кастомизация

Для контекстных туров можно полностью изменить визуальное оформление с помощью CSS. Основные классы:

  • .introjs-tooltip — контейнер подсказки.
  • .introjs-arrow — стрелка, указывающая на элемент.
  • .introjs-tooltiptext — текст подсказки.
  • .introjs-bullets — индикаторы шагов.

Пример кастомного оформления:

.introjs-tooltip {
    background-color: #222;
    color: #fff;
    border-radius: 8px;
    padding: 15px;
}

.introjs-arrow {
    border-top-color: #222 !important;
}

.custom-highlight {
    border: 2px solid #f39c12;
    box-shadow: 0 0 10px #f39c12;
}

Анимация и плавное появление

Intro.js поддерживает плавное появление подсказок с помощью CSS-анимаций. Можно использовать стандартные свойства transition или подключить сторонние библиотеки для более сложных эффектов:

.introjs-tooltip {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.introjs-showElement .introjs-tooltip {
    opacity: 1;
    transform: translateY(0);
}

Интеграция с динамическим контентом

Контекстные туры можно применять к элементам, создаваемым динамически через JavaScript или фреймворки вроде React или Vue. В этом случае важно инициализировать тур после того, как элементы добавлены в DOM:

setTimeout(() => {
    introJs().setOptions({
        steps: [
            { element: '#dynamicStep', intro: 'Динамически созданный элемент' }
        ]
    }).start();
}, 500);

Итоговые возможности

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

Оглавление