Структура попапа

Pop-up в Driver.js является центральным элементом, обеспечивающим интерактивное выделение элементов на странице и предоставление пользователю подсказок. Структура попапа состоит из нескольких ключевых компонентов, каждый из которых отвечает за визуальное и функциональное представление шага.

1. Контейнер попапа

Попап всегда создается как отдельный HTML-элемент с классом driver-popover внутри динамически создаваемого контейнера driver-overlay. Этот контейнер:

  • Располагается поверх основной страницы, блокируя взаимодействие с остальными элементами.
  • Обеспечивает плавное позиционирование попапа относительно выделенного элемента.
  • Поддерживает динамическое обновление размеров при изменении окна браузера.

Пример структуры:

<div class="driver-overlay">
  <div class="driver-popover" style="top: 150px; left: 300px;">
    <!-- Внутреннее содержимое попапа -->
  </div>
</div>

2. Внутреннее содержимое попапа

Внутри driver-popover находится несколько стандартных блоков:

  1. Текстовое сообщение (driver-tooltip-message) Отвечает за отображение заголовка и описания текущего шага. Пример:

    <div class="driver-tooltip-message">
  <h3 class="driver-tooltip-title">Заголовок шага</h3>
  <p class="driver-tooltip-description">Описание действия для пользователя.</p>
</div>

  2. Элементы управления навигацией (driver-tooltip-controls) Включают кнопки «Следующий», «Предыдущий» и «Закрыть». Могут быть кастомизированы через настройки onNext, onPrevious и onClose.

    <div class="driver-tooltip-controls">
  <button class="driver-btn-prev">Назад</button>
  <button class="driver-btn-next">Вперед</button>
  <button class="driver-btn-close">Закрыть</button>
</div>

  3. Стрелка попапа (driver-tooltip-arrow) Визуальный элемент, соединяющий попап с выделенным элементом. Располагается динамически с учетом позиции цели (top, bottom, left, right).

3. Позиционирование попапа

Driver.js автоматически рассчитывает оптимальную позицию попапа на основе координат целевого элемента и размера окна. Параметры, влияющие на позиционирование:

  • placement — верх, низ, слева, справа.
  • padding — расстояние между попапом и элементом.
  • offset — точная корректировка позиции в пикселях.
  • allowClose — возможность закрытия попапа кликом вне его области.

Реализация:

driver.highlight({
  element: '#button',
  popover: {
    title: 'Кнопка действия',
    description: 'Нажмите здесь для перехода к следующему шагу',
    position: 'bottom'
  }
});

4. Стилизация и кастомизация

Попапы полностью настраиваемы через CSS и JavaScript. Основные классы для стилизации:

  • .driver-popover — основной контейнер, можно изменять фон, тени, рамки.
  • .driver-tooltip-title — шрифт, размер, цвет заголовка.
  • .driver-tooltip-description — текст описания, межстрочный интервал.
  • .driver-tooltip-controls — оформление кнопок, расположение навигации.
  • .driver-tooltip-arrow — цвет стрелки, размер.

Возможна интеграция с собственными стилями или фреймворками (Bootstrap, Tailwind), сохраняя функциональность Driver.js.

5. Динамическое обновление попапа

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

  • driver.highlight() — создает новый шаг и автоматически перемещает попап.
  • driver.moveNext() / driver.movePrevious() — навигация между шагами.
  • driver.reset() — удаляет текущий попап и снимает все выделения.

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

6. Анимация появления и скрытия

По умолчанию попап появляется с анимацией fade-in, исчезает с fade-out. Параметры анимации задаются через CSS:

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

Можно кастомизировать скорость, направление движения и эффект при открытии/закрытии.

7. Дополнительные возможности

  • Модальные подсказки: блокируют взаимодействие с остальной страницей.
  • Многоступенчатые подсказки: последовательные попапы с навигацией.
  • Контекстные подсказки: позиция автоматически подстраивается под экран и прокрутку.

Эти возможности делают структуру попапа Driver.js универсальной для любых интерактивных интерфейсов.

Оглавление