HTML-атрибуты

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

HTML-атрибуты обеспечивают декларативный подход: структура тура задаётся прямо в разметке, что упрощает сопровождение и делает код более читаемым.

Базовые атрибуты

data-intro

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

<div data-intro="Это кнопка запуска процесса"></div>

Особенности:

  • Поддерживает HTML-разметку внутри строки
  • Может содержать переносы строк
  • Является обязательным для отображения шага

data-step

Задаёт порядок отображения шагов тура.

<div data-intro="Первый шаг" data-step="1"></div>
<div data-intro="Второй шаг" data-step="2"></div>

Особенности:

  • Значение — целое число
  • Шаги сортируются по возрастанию
  • При отсутствии атрибута порядок определяется автоматически (по DOM)

data-title

Добавляет заголовок к подсказке.

<div data-intro="Описание функции" data-title="Функция поиска"></div>

Особенности:

  • Отображается над основным текстом
  • Не является обязательным
  • Повышает читаемость сложных туров

Атрибуты позиционирования

data-position

Определяет положение всплывающей подсказки относительно элемента.

<div data-intro="Описание" data-position="right"></div>

Возможные значения:

  • top
  • right
  • bottom
  • left
  • auto

Особенности:

  • auto позволяет библиотеке выбрать оптимальное положение
  • При недостатке места позиция может автоматически изменяться

Атрибуты стилизации

data-tooltipClass

Позволяет задать собственный CSS-класс для тултипа.

<div data-intro="Важно!" data-tooltipClass="customTooltip"></div>

Использование:

.customTooltip {
  background-color: #333;
  color: #fff;
}

data-highlightClass

Добавляет CSS-класс к выделяемому элементу.

<div data-intro="Выделенный блок" data-highlightClass="highlighted"></div>

Пример:

.highlighted {
  border: 2px solid red;
}

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

data-disable-interaction

Отключает взаимодействие пользователя с элементом во время шага.

<div data-intro="Нельзя нажимать" data-disable-interaction="true"></div>

Особенности:

  • Полезно для предотвращения случайных действий
  • Работает через наложение блокирующего слоя

data-scrollTo

Управляет прокруткой страницы до элемента.

<div data-intro="Прокрутка к элементу" data-scrollTo="element"></div>

Возможные значения:

  • element — прокрутка к элементу
  • tooltip — прокрутка к подсказке

Атрибуты группировки и фильтрации

data-intro-group (кастомное использование)

Хотя не является встроенным, часто применяется для логической группировки шагов:

<div data-intro="Шаг A" data-intro-group="admin"></div>
<div data-intro="Шаг B" data-intro-group="user"></div>

Используется совместно с JavaScript для выборочного запуска туров.

Атрибуты динамического контента

Использование HTML внутри data-intro

<div data-intro="<b>Жирный текст</b><br>Новая строка"></div>

Особенности:

  • Поддержка базового HTML
  • Не рекомендуется вставлять сложные интерактивные элементы

Автоматическое определение шагов

Если data-step не указан:

<div data-intro="Шаг 1"></div>
<div data-intro="Шаг 2"></div>

Порядок будет:

  1. Первый элемент в DOM
  2. Второй элемент

Недостатки:

  • Зависимость от структуры HTML
  • Сложность поддержки при изменениях

Приоритет атрибутов

При наличии нескольких параметров:

  1. data-step — определяет порядок
  2. data-position — влияет на отображение
  3. data-tooltipClass — влияет на внешний вид
  4. data-disable-interaction — влияет на поведение

Взаимодействие с JavaScript

HTML-атрибуты могут быть переопределены через Jav * aScript:

introJs().setOptions({
  steps: [
    {
      element: document.querySelector('#id'),
      intro: 'Описание'
    }
  ]
});

При использовании steps:

  • HTML-атрибуты игнорируются
  • Управление полностью переносится в код

Частые ошибки

1. Отсутствие data-intro

<div data-step="1"></div>

Шаг не будет отображён.

2. Дублирование data-step

<div data-step="1"></div>
<div data-step="1"></div>

Поведение становится непредсказуемым.

3. Некорректный HTML внутри data-intro

<div data-intro="<div>Ошибка"></div>

Может привести к поломке тултипа.

Практическая структура разметки

<button 
  data-intro="Нажмите для запуска" 
  data-step="1" 
  data-position="bottom">
  Старт
</button>

<input 
  data-intro="Введите данные" 
  data-step="2" 
  data-position="right">

Особенности:

  • Логичный порядок шагов
  • Явное указание позиции
  • Минимум логики в JavaScript

Расширенные сценарии

Условное отображение шагов

Через JavaScript можно фильтровать элементы:

document.querySelectorAll('[data-intro]').forEach(el => {
  if (someCondition) {
    el.removeAttribute('data-intro');
  }
});

Динамическое изменение атрибутов

element.setAttribute('data-intro', 'Новое описание');

Позволяет:

  • адаптировать тур под пользователя
  • изменять сценарий на лету

Производительность и масштабируемость

Использование HTML-атрибутов:

  • уменьшает количество JavaScript-кода
  • ускоряет разработку
  • облегчает поддержку

Однако при большом количестве шагов:

  • сложнее управлять логикой
  • требуется строгая структура data-step

Сравнение подходов

Подход Преимущества Недостатки
HTML-атрибуты Простота, наглядность Ограниченная гибкость
JavaScript Полный контроль Более сложный код

Рекомендации по использованию

  • Всегда явно задавать data-step
  • Использовать data-title для сложных интерфейсов
  • Ограничивать количество HTML внутри data-intro
  • Применять data-tooltipClass для единообразного дизайна
  • Не смешивать декларативный и программный подход без необходимости

Поведение при изменении DOM

Intro.js считывает атрибуты в момент запуска:

introJs().start();

Если элементы:

  • добавлены после запуска — они не попадут в тур
  • удалены — шаг будет пропущен или вызовет ошибку

Интеграция с фреймворками

В React, Vue, Angular:

  • атрибуты можно задавать через шаблоны
  • важно учитывать жизненный цикл компонентов

Пример (React):

<div data-intro="Описание" data-step="1"></div>

Итоговая структура атрибутов

Наиболее полный пример:

<div
  data-intro="Описание элемента"
  data-step="3"
  data-title="Заголовок"
  data-position="left"
  data-tooltipClass="customTooltip"
  data-highlightClass="highlight"
  data-disable-interaction="true">
</div>

Такой набор покрывает:

  • порядок
  • содержимое
  • внешний вид
  • поведение

Грамотное использование HTML-атрибутов Intro.js позволяет строить сложные интерактивные сценарии без перегрузки JavaScript-логикой, сохраняя читаемость и управляемость кода.

Оглавление