CSS-классы и селекторы

Библиотека Intro.js активно использует CSS-классы для управления внешним видом элементов интерфейса: подсветки шагов, всплывающих подсказок, затемнения фона и анимаций. Понимание структуры этих классов позволяет гибко настраивать внешний вид тура без изменения JavaScript-логики.

Каждый элемент, создаваемый Intro.js, получает набор предопределённых классов, которые можно переопределить или дополнить в собственных стилях.

Ключевые классы:

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

Пример базового переопределения:

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

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

Intro.js позволяет задавать пользовательские CSS-классы для каждого шага. Это делается через свойство tooltipClass или highlightClass.

Пример:

introJs().setOptions({
  steps: [
    {
      element: document.querySelector('#step1'),
      intro: 'Описание шага',
      tooltipClass: 'customTooltip',
      highlightClass: 'customHighlight'
    }
  ]
}).start();

Соответствующие стили:

.customTooltip {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
    color: #000;
}

.customHighlight {
    border: 2px solid red;
    box-shadow: 0 0 10px red;
}

Селекторы элементов для шагов

Каждый шаг тура привязывается к DOM-элементу через CSS-селектор. Intro.js поддерживает любые валидные селекторы:

По идентификатору

element: '#header'

По классу

element: '.menu-item'

По атрибуту

element: '[data-step="1"]'

Вложенные селекторы

element: '.container .item.active'

Важно учитывать, что селектор должен возвращать единственный элемент. При совпадении нескольких элементов будет использован первый найденный.

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

Intro.js поддерживает автоматическое создание шагов через HTML-разметку с использованием data- атрибутов. Это позволяет минимизировать JavaScript-код.

Пример:

<div data-intro="Это заголовок" data-step="1"></div>
<div data-intro="Это кнопка" data-step="2"></div>

Дополнительные атрибуты:

  • data-tooltipClass
  • data-highlightClass
  • data-position (top, bottom, left, right)

Пример:

<button 
  data-intro="Нажмите сюда" 
  data-step="3" 
  data-tooltipClass="customTooltip"
  data-position="right">
</button>

Позиционирование через CSS и селекторы

Intro.js автоматически рассчитывает положение подсказки, но CSS может влиять на результат. Особенно это важно при использовании нестандартных layout’ов:

  • position: relative
  • overflow: hidden
  • z-index

Пример проблемы:

.container {
    overflow: hidden;
}

В этом случае подсветка может обрезаться. Решение — изменить:

.container {
    overflow: visible;
}

Управление слоями (z-index)

Intro.js использует фиксированные значения z-index, но их можно переопределить:

.introjs-overlay {
    z-index: 9998;
}

.introjs-helperLayer {
    z-index: 9999;
}

.introjs-tooltip {
    z-index: 10000;
}

Это необходимо при наличии сложных интерфейсов с модальными окнами или всплывающими меню.

Кастомизация кнопок через классы

Кнопки управления (Next, Prev, Skip) имеют класс .introjs-button. Для более точной настройки можно использовать дополнительные селекторы:

.introjs-nextbutton {
    background-color: green;
    color: white;
}

.introjs-prevbutton {
    background-color: gray;
}

.introjs-skipbutton {
    color: red;
}

Также доступны состояния:

.introjs-button:hover {
    opacity: 0.8;
}

.introjs-disabled {
    opacity: 0.3;
    pointer-events: none;
}

Анимации и переходы

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

.introjs-tooltip {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

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

.introjs-tooltip.introjs-hideElement {
    transform: scale(0.8);
    opacity: 0;
}

Селекторы состояний

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

  • .introjs-showElement — текущий активный элемент
  • .introjs-relativePosition — применяется к родителям
  • .introjs-fixParent — фиксирует позиционирование

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

.introjs-showElement {
    outline: 3px solid blue;
}

Ограничение области действия через селекторы

Иногда требуется применять стили только внутри определённого контейнера:

.app-tour .introjs-tooltip {
    font-size: 14px;
}

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

Работа с псевдоклассами и псевдоэлементами

Intro.js элементы можно дополнительно стилизовать:

.introjs-tooltip::after {
    content: '';
    display: block;
    height: 2px;
    background: #fff;
    margin-top: 10px;
}

Темизация через CSS-классы

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

.dark-theme .introjs-tooltip {
    background-color: #111;
    color: #eee;
}

.light-theme .introjs-tooltip {
    background-color: #fff;
    color: #000;
}

Переключение темы:

document.body.classList.add('dark-theme');

Комбинирование селекторов и классов

Для точечной настройки используется комбинирование:

.introjs-tooltip.customTooltip.warning {
    border: 2px solid orange;
}

Это позволяет создавать сложные визуальные сценарии без изменения структуры шагов.

Изоляция стилей

При использовании CSS-фреймворков возможны конфликты. Для изоляции применяются:

  • более специфичные селекторы
  • namespace-классы
  • использование !important (в крайних случаях)

Пример:

body .introjs-tooltip {
    font-family: Arial, sans-serif !important;
}

Практика: полная кастомизация шага

introJs().setOptions({
  steps: [
    {
      element: '#profile',
      intro: 'Профиль пользователя',
      tooltipClass: 'profileTooltip',
      highlightClass: 'profileHighlight'
    }
  ]
}).start();
.profileTooltip {
    background: #333;
    color: #fff;
    border-left: 5px solid #4caf50;
}

.profileHighlight {
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.7);
}

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

Оглавление