Отключение подсветки

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

Управление подсветкой на уровне шага

Каждый шаг в Shepherd создаётся через объект Shepherd.Tour и метод addStep. В конфигурации шага можно задать множество параметров, среди которых ключевым для подсветки является highlightClass.

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});

tour.addStep({
  id: 'example-step',
  text: 'Элемент без подсветки',
  attachTo: {
    element: '#button1',
    on: 'bottom'
  },
  highlightClass: '', // пустая строка отключает подсветку
});

Значение highlightClass по умолчанию задаёт стандартный класс подсветки (shepherd-highlight). Присвоение пустой строки или null отключает применение CSS-класса к целевому элементу.

Глобальное отключение подсветки

Чтобы отключить подсветку для всех шагов тура сразу, используется параметр defaultStepOptions. Достаточно явно задать пустой класс подсветки:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true,
    highlightClass: '' // отключение подсветки для всех шагов
  }
});

Таким образом, каждый шаг, создаваемый без явного указания highlightClass, не будет подсвечивать элемент.

Альтернативный подход через CSS

В некоторых случаях требуется оставить класс shepherd-highlight, но скрыть визуальный эффект через стили. Это может быть полезно при динамическом управлении подсветкой с помощью JavaScript, когда отключение через параметр шага нежелательно:

.shepherd-highlight {
  box-shadow: none !important;
  background: transparent !important;
}

Такой подход позволяет сохранить структуру DOM, но полностью убрать визуальное выделение.

Учет динамических элементов

При работе с элементами, которые появляются на странице динамически (например, после AJAX-загрузки), важно учитывать момент инициализации шага. Если элемент ещё не существует в DOM, Shepherd не применит подсветку, даже если она включена. Для корректного отключения подсветки на таких элементах достаточно указать пустой highlightClass в момент создания шага:

tour.addStep({
  id: 'dynamic-step',
  text: 'Динамический элемент без подсветки',
  attachTo: {
    element: '#dynamicElement',
    on: 'top'
  },
  highlightClass: ''
});

Совместимость с темами и кастомизацией

Shepherd.js поддерживает несколько встроенных тем (shepherd-theme-arrows, shepherd-theme-dark, shepherd-theme-default). Отключение подсветки не влияет на остальные стили темы, так как подсветка оформляется отдельным CSS-классом. Это позволяет использовать все визуальные эффекты темы без изменения поведения подсветки:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-dark',
    scrollTo: true,
    highlightClass: '' // подсветка отключена
  }
});

Практические рекомендации

  1. Для минималистичных интерфейсов — лучше использовать глобальное отключение через defaultStepOptions.
  2. Для редких шагов без подсветки — задавать пустой highlightClass только в нужных шагах.
  3. Для сохранения структуры DOM — можно оставить класс подсветки и управлять стилями через CSS.
  4. Для динамических элементов — убедиться, что шаг создаётся после того, как элемент появился на странице.

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

Оглавление