Настройка внешнего вида хинтов

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

  • Ширина и высота подсказки: можно задать фиксированные размеры через CSS или динамически через свойства tooltipClass.
  • Цвет фона и текста: стандартные классы .introjs-tooltip и .introjs-tooltiptext позволяют изменять фон, цвет шрифта, прозрачность и границы.
  • Положение стрелки (arrow): регулируется автоматически, но можно управлять с помощью классов introjs-arrow и псевдоэлементов CSS.

Настройка через JavaScript

Intro.js позволяет модифицировать хинты при инициализации с помощью объекта настроек:

introJs().setOptions({
    tooltipClass: 'customTooltip',
    highlightClass: 'customHighlight',
    showStepNumbers: false,
    showBullets: true
}).start();
  • tooltipClass — добавляет пользовательский CSS-класс к каждой подсказке.
  • highlightClass — позволяет выделить элемент с помощью кастомного стиля.
  • showStepNumbers — отключение или включение нумерации шагов.
  • showBullets — управление видимостью навигационных точек (буллетов).

Стилизация стрелок и подсказок

С помощью CSS можно тонко настроить все визуальные элементы:

.customTooltip {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-radius: 8px;
    padding: 15px;
    max-width: 300px;
    font-size: 14px;
}

.customTooltip .introjs-arrow {
    border-top-color: #2c3e50; /* для стрелки, направленной вверх */
}

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

  • Стрелка (.introjs-arrow) наследует цвет от фона подсказки, поэтому изменение цвета фона требует корректировки стрелки.
  • Подсказка может иметь любую форму с помощью border-radius, а шрифт и размеры текста регулируются стандартными CSS-свойствами.
  • Максимальная ширина (max-width) предотвращает слишком широкие хинты, что улучшает читаемость.

Динамическое управление стилями

Для более сложных сценариев допустимо изменение стилей прямо во время выполнения шага:

introJs().onafterchange(function(targetElement) {
    const tooltip = document.querySelector('.introjs-tooltip');
    if (tooltip) {
        tooltip.style.backgroundColor = targetElement.dataset.bg || '#34495e';
        tooltip.style.color = targetElement.dataset.color || '#fff';
    }
});
  • Использование onafterchange позволяет подстраивать подсказку под конкретный элемент.
  • Можно хранить цвета и размеры в data-атрибутах элементов, чтобы легко менять внешний вид без изменения CSS.

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

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

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

.introjs-showElement .customTooltip {
    opacity: 1;
    transform: translateY(0);
}
  • Класс .introjs-showElement применяется к подсказке при её отображении.
  • Позволяет реализовать плавное появление и смещение для улучшения UX.

Использование кастомных шрифтов и иконок

Подсказки могут содержать любые HTML-элементы:

introJs().setOptions({
    steps: [
        {
            element: '#button1',
            intro: '<i class="fas fa-info-circle"></i> Нажмите здесь для действий',
            tooltipClass: 'iconTooltip'
        }
    ]
});
.iconTooltip {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}
  • Можно добавлять иконки, изображения, ссылки и форматированный текст.
  • CSS позволяет контролировать расположение и размер вложенных элементов внутри подсказки.

Настройка выделения элементов (highlight)

Выделение элемента также влияет на восприятие подсказки. Основные параметры:

.customHighlight {
    box-shadow: 0 0 10px 4px rgba(46, 204, 113, 0.7);
    border-radius: 5px;
}
  • box-shadow создаёт визуальное окружение вокруг элемента.
  • border-radius согласуется с формой элемента, чтобы выделение выглядело естественно.
  • Можно комбинировать с изменением цвета фона подсказки для единого визуального стиля.

Настройка навигационных элементов

Подсказки могут содержать стрелки «Назад»/«Вперёд» и кнопки закрытия:

.customTooltip .introjs-button {
    background-color: #1abc9c;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    margin: 2px;
}
  • Кнопки можно позиционировать и стилизовать независимо от основной подсказки.
  • Можно изменять цвет, размер, шрифт и добавлять эффекты наведения для интерактивности.

Итоговая комбинация

Комплексное использование кастомных классов, JavaScript-настроек, CSS-анимации и data-атрибутов позволяет создавать подсказки любого визуального стиля, которые гармонично интегрируются в интерфейс приложения, делают инструкцию понятной и эстетически привлекательной.

Оглавление