Создание точечных подсказок

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

Подключение библиотеки осуществляется через <script> и <link> для CSS:

<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, через который создаются и настраиваются подсказки.

Определение точек подсказок

Каждая подсказка привязывается к элементу DOM с помощью атрибутов data-intro и data-step:

<button id="saveBtn" data-step="1" data-intro="Нажмите здесь для сохранения изменений.">Сохранить</button>
<input type="text" data-step="2" data-intro="Введите сюда имя пользователя.">
  • data-intro — текст подсказки, который будет показан пользователю.
  • data-step — порядок отображения подсказок. Библиотека автоматически сортирует элементы по возрастанию этого числа.

Дополнительно можно использовать data-position, чтобы задавать положение подсказки относительно элемента:

  • top, left, right, bottom, auto.
<button data-step="3" data-intro="Это кнопка настроек." data-position="right">Настройки</button>

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

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

introJs().start();

Для большей гибкости используется цепочка методов:

introJs()
  .setOptions({
    steps: [
      { 
        element: '#saveBtn', 
        intro: 'Сохраните изменения кнопкой.', 
        position: 'bottom' 
      },
      { 
        element: 'input[type=text]', 
        intro: 'Введите имя пользователя.', 
        position: 'right' 
      }
    ],
    showStepNumbers: true,
    showBullets: false,
    exitOnOverlayClick: true
  })
  .start();
  • steps — массив объектов с явным указанием элементов и текста подсказок.
  • showStepNumbers — отображение номера шага на подсказке.
  • showBullets — индикаторы шагов внизу подсказки.
  • exitOnOverlayClick — закрытие подсказки при клике на затемнённую область.

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

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

  • tooltipClass — добавление CSS-класса к подсказке.
  • highlightClass — класс для подсвечиваемого элемента.
  • nextLabel, prevLabel, skipLabel, doneLabel — текст кнопок управления.
  • scrollToElement — прокрутка страницы к текущему элементу.

Пример кастомизации:

introJs().setOptions({
  tooltipClass: 'custom-tooltip',
  highlightClass: 'custom-highlight',
  nextLabel: 'Далее',
  prevLabel: 'Назад',
  doneLabel: 'Готово',
  exitOnOverlayClick: false
}).start();

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

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

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

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

const intro = introJs();

intro.onbeforechange(function(targetElement) {
  console.log('Подсказка меняется. Текущий элемент:', targetElement);
});

intro.onafterchange(function(targetElement) {
  console.log('Подсказка отображена для:', targetElement);
});

intro.oncomplete(function() {
  console.log('Пошаговая инструкция завершена.');
});

intro.start();

Динамическое добавление подсказок

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

introJs().setOptions({
  steps: [
    {
      element: document.querySelector('#dynamicBtn'),
      intro: 'Это динамически добавленная подсказка.'
    },
    {
      element: document.querySelector('#dynamicInput'),
      intro: 'А это текстовое поле тоже добавлено программно.'
    }
  ]
}).start();

Работа с множеством подсказок на одной странице

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

const tour1 = introJs().setOptions({ steps: [{ element: '#step1', intro: 'Тур 1, шаг 1' }] });
const tour2 = introJs().setOptions({ steps: [{ element: '#stepA', intro: 'Тур 2, шаг 1' }] });

tour1.start();
// позже можно вызвать tour2.start()

Каждый объект introJs() создаёт независимый экземпляр с собственными настройками, что позволяет одновременно поддерживать разные последовательности подсказок.

Интерактивные подсказки

Подсказки могут содержать HTML для кнопок, ссылок и других элементов управления:

introJs().setOptions({
  steps: [
    {
      element: '#interactive',
      intro: '<strong>Важный шаг!</strong><br>Нажмите <button oncl ick="alert(\'Привет!\')">сюда</button> для действия.'
    }
  ]
}).start();

Важно помнить, что встроенный HTML может потребовать дополнительного CSS для корректного отображения и адаптации под разные экраны.

Адаптация под мобильные устройства

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

  • Использовать позицию auto для подсказок.
  • Ограничивать длинный текст, чтобы не вызывать горизонтальную прокрутку.
  • Тестировать на разных устройствах и разрешениях.
introJs().setOptions({
  steps: [
    { element: '#mobileBtn', intro: 'Кнопка на мобильном устройстве', position: 'auto' }
  ]
}).start();

Управление прогрессом подсказок

Можно вручную переключаться между шагами:

const intro = introJs();
intro.start();

// Перейти к следующему шагу
intro.nextStep();

// Вернуться на предыдущий шаг
intro.previousStep();

// Пропустить тур
intro.exit();

Эти методы позволяют интегрировать подсказки с пользовательским интерфейсом и событиями, например, с кнопками «Пропустить тур» на странице.

Оглавление