Стилизация попапа

Библиотека Driver.js предоставляет гибкий механизм кастомизации стилей подсказок и попапов, что позволяет создавать интерактивные руководства и обучающие туры с уникальным визуальным оформлением. Все стили разделяются на две основные категории: глобальные и локальные, применяемые к конкретным шагам.

Глобальные стили через Driver конфигурацию

Основные свойства для стилизации попапа задаются при создании экземпляра Driver:

const driver = new Driver({
    opacity: 0.7,
    padding: 15,
    allowClose: true,
    overlayClickNext: false,
    doneBtnText: 'Готово',
    closeBtnText: 'Закрыть',
    nextBtnText: 'Далее',
    prevBtnText: 'Назад',
    animate: true,
    stageBackground: '#ffffff',
    popoverClass: 'custom-popover'
});
  • opacity – уровень прозрачности затемнения фона. Значение от 0 до 1.
  • padding – расстояние между подсвечиваемым элементом и рамкой подсветки.
  • allowClose – возможность закрытия попапа кнопкой закрытия.
  • overlayClickNext – при true клик по затемнённому фону переводит к следующему шагу.
  • doneBtnText, closeBtnText, nextBtnText, prevBtnText – тексты для кнопок навигации.
  • animate – включение анимации появления попапа.
  • stageBackground – цвет подсветки вокруг элемента.
  • popoverClass – добавление пользовательского CSS класса для всего попапа.

Локальная кастомизация каждого шага

Каждый шаг может иметь индивидуальные стили:

driver.defineSteps([
    {
        element: '#profile-picture',
        popover: {
            title: 'Ваш профиль',
            description: 'Здесь можно изменить аватар и личные данные',
            position: 'bottom',
            className: 'highlight-popover'
        }
    },
    {
        element: '#settings-button',
        popover: {
            title: 'Настройки',
            description: 'Настройте интерфейс и уведомления',
            position: 'left',
            className: 'settings-popover'
        }
    }
]);
  • element – CSS-селектор элемента, вокруг которого будет popover.
  • title – заголовок подсказки.
  • description – основной текст popover.
  • position – положение подсказки относительно элемента: 'top', 'bottom', 'left', 'right'.
  • className – добавление CSS-класса для конкретного шага.

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

Кастомизация стрелок и рамок

Driver.js автоматически формирует стрелки popover, но их стили можно менять через CSS:

.custom-popover .driver-arrow {
    border-color: #ff5733; /* цвет стрелки */
    width: 20px;
    height: 20px;
}

.highlight-popover .driver-popover {
    background-color: #f0f8ff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
  • .driver-arrow – класс стрелки popover, можно менять цвет, размер и форму.
  • .driver-popover – основной блок popover. Можно задавать фон, тень, радиус скругления и отступы.

Стилизация кнопок навигации

Кнопки управления шагами (Next, Prev, Done, Close) также доступны для кастомизации через CSS:

.custom-popover .driver-close-btn {
    background: transparent;
    color: #333;
    font-weight: bold;
    border: none;
}

.custom-popover .driver-next-btn {
    background-color: #007bff;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
}
  • .driver-close-btn – кнопка закрытия popover.
  • .driver-next-btn, .driver-prev-btn, .driver-done-btn – кнопки навигации.
  • Можно задавать цвета, тени, скругления, шрифты и эффекты наведения.

Адаптивность и динамическое позиционирование

Driver.js автоматически подбирает положение popover для видимости на экране, но с помощью CSS и параметров padding и position можно контролировать расположение:

  • position: 'auto' – библиотека сама выбирает оптимальное положение.
  • padding: увеличивая отступы, можно избежать наложения popover на другие элементы интерфейса.
  • Использование медиазапросов позволяет адаптировать popover для мобильных устройств:
@media (max-width: 768px) {
    .custom-popover .driver-popover {
        width: 90%;
        font-size: 14px;
    }
}

Добавление анимаций через CSS

Даже при включенной опции animate: true, можно задавать собственные анимации:

.custom-popover {
    animation: fadeInScale 0.3s ease-in-out;
}

@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}
  • Анимации могут управлять появлением, исчезновением, масштабированием и вращением popover.
  • Поддерживается любая комбинация CSS-свойств для создания уникального визуального эффекта.

Итоговые рекомендации по стилизации

  • Использовать глобальные настройки для единообразного внешнего вида всех popover.
  • Добавлять локальные классы для шагов, требующих особого выделения.
  • Контролировать стрелки, фон и тени через CSS, чтобы интегрировать popover в дизайн интерфейса.
  • Настраивать кнопки навигации под общую стилистику приложения.
  • Применять адаптивные стили и анимации, чтобы popover оставался удобочитаемым на разных устройствах.

С помощью этих инструментов Driver.js позволяет создавать не только функциональные, но и визуально привлекательные руководства для пользователей.

Оглавление