Структура CSS-классов библиотеки

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

.introjs-overlay

Этот класс отвечает за затемнение фона вокруг элемента, который в данный момент выделен. Ключевые характеристики:

  • Позиционирование: фиксированное (position: fixed), чтобы оверлей всегда покрывал весь экран.
  • Цвет и прозрачность: обычно черный с прозрачностью (background: rgba(0,0,0,0.5)), но можно изменять через CSS.
  • Z-index: достаточно высокий, чтобы находиться над другими элементами страницы, но ниже подсказки (z-index: 10000).

.introjs-tooltip

Основной контейнер всплывающей подсказки. Позволяет задавать внешний вид текста, отступы и рамки:

  • Стиль: фон по умолчанию белый с тенью (box-shadow: 0 0 10px rgba(0,0,0,0.3)).

  • Позиционирование: абсолютное относительно выделенного элемента.

  • Анимация: плавное появление при смене шагов.

  • Подклассы:

    • .introjs-tooltiptext — текстовая область внутри подсказки.
    • .introjs-arrow — стрелка, указывающая на элемент. Можно менять цвет и направление через CSS.
    • .introjs-tooltipbuttons — контейнер кнопок навигации (Next, Prev, Skip).

.introjs-helperLayer

Используется для выделения активного элемента:

  • Внешний вид: прозрачная рамка с подсветкой вокруг элемента.
  • Анимация: можно задавать плавное появление/исчезновение.
  • Размер: динамически подстраивается под размеры выделенного элемента.

.introjs-disabled

Класс применяется к элементам, которые нельзя выделять во время пошагового интро. Обычно добавляется автоматически к элементам вне текущего шага.

.introjs-tooltipReferenceLayer

Контейнер, который помогает позиционировать подсказку относительно выбранного элемента. Используется для корректной работы стрелки и смещения.

Дополнительные CSS-настройки

Настройка кнопок

Элементы навигации (Next, Prev, Skip) можно стилизовать через .introjs-button или .introjs-prevbutton. Рекомендуется:

  • Устанавливать отступы и размер шрифта для лучшей читаемости.
  • Использовать собственный цвет фона и рамку для соответствия теме сайта.
  • При наведении добавлять эффект изменения цвета или тени.

Модификация стрелки

Стрелка подсказки имеет класс .introjs-arrow и .introjs-arrow-inner. Изменение этих классов позволяет:

  • Менять направление стрелки (top, bottom, left, right).
  • Настраивать цвет и ширину.
  • Добавлять анимацию появления стрелки.

Адаптивность

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

  • Минимальная ширина .introjs-tooltip для мобильных экранов.
  • Изменение размера шрифта и кнопок при уменьшении ширины окна.
  • Скроллинг контента подсказки при переполнении текста.

Порядок применения классов

  1. Создается оверлей .introjs-overlay.
  2. Создается вспомогательный слой .introjs-helperLayer для выделенного элемента.
  3. Создается контейнер подсказки .introjs-tooltip.
  4. Подсказка получает стрелку .introjs-arrow и кнопки .introjs-tooltipbuttons.
  5. При смене шага классы обновляются, старые слои удаляются или скрываются.

Советы по кастомизации

  • Темизация: изменение фонового цвета и тени .introjs-tooltip позволяет интегрировать подсказки в любой дизайн.
  • Плавность анимации: добавление CSS-переходов (transition) на .introjs-helperLayer и .introjs-tooltip делает шаги более динамичными.
  • Изоляция интерактивных элементов: .introjs-disabled предотвращает взаимодействие с остальными элементами страницы.
  • Поддержка RTL: для сайтов с правосторонним текстом можно модифицировать стрелки и позиции подсказки через CSS.

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

Оглавление