Изменение HTML разметки попапа

Driver.js предоставляет гибкие инструменты для изменения внешнего вида и структуры подсказок (popups) с помощью настроек опций и переопределения шаблонов. Каждый шаг (step) поддерживает собственный набор параметров, которые позволяют управлять содержимым, стилем и поведением подсказки.

Использование параметра popover

Каждый шаг в Driver.js может содержать объект popover, в котором задаются:

  • title — заголовок попапа
  • description — текст описания
  • position — расположение относительно целевого элемента (top, bottom, left, right, auto)
  • className — пользовательский CSS-класс для попапа

Пример настройки:

const driver = new Driver();

driver.defineSteps([
  {
    element: '#button',
    popover: {
      title: 'Кнопка отправки',
      description: 'Нажмите эту кнопку, чтобы отправить форму.',
      position: 'bottom',
      className: 'custom-popover'
    }
  }
]);

driver.start();

Ключевой момент: className позволяет полностью переопределить стили попапа без вмешательства в исходный код библиотеки.

Переопределение шаблона попапа

Для более глубокой кастомизации можно использовать собственный HTML-шаблон через template в глобальных настройках Driver.js:

const driver = new Driver({
  template: `
    

      
{{title}}

      
{{description}}

      
    

  `
});
  • {{title}} и {{description}} — переменные, которые автоматически заменяются на данные из шага.
  • Дополнительно можно вставлять свои кнопки или элементы управления.

Это позволяет создавать совершенно уникальные попапы, управлять их HTML-разметкой и стилями без изменения исходной библиотеки.

Динамическое обновление содержимого

С помощью методов Driver.js можно изменять содержимое попапа во время работы. Например:

driver.on('next', (step) => {
  const popover = document.querySelector('.driver-popover');
  if (popover) {
    popover.querySelector('.driver-description').innerHTML = 'Новый текст подсказки';
  }
});
  • Использование событий (next, previous, start) позволяет адаптировать текст и элементы под состояние приложения.
  • Можно добавлять изображения, списки, ссылки и любые HTML-компоненты.

Настройка кнопок и элементов управления

Driver.js по умолчанию использует кнопки Next и Close. Их можно заменить или расширить через шаблон:

const driver = new Driver({
  template: `
    

      
{{title}}

      
{{description}}

      

        
        
        
      

    

  `
});
  • Кнопки можно связывать с событиями Driver.js (driver.moveNext(), driver.movePrevious(), driver.reset())
  • Позволяет создавать собственные навигационные схемы, например пошаговые инструкции с прогресс-баром.

Добавление кастомного HTML и стилей в описание

В description разрешается использовать HTML-теги:

driver.defineSteps([
  {
    element: '#menu',
    popover: {
      title: 'Главное меню',
      description: `
        
      `,
      position: 'right'
    }
  }
]);
Оглавление