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

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

Алгоритм выбора позиции

Intro.js поддерживает несколько предопределённых позиций: top, right, bottom, left. Если позиция явно не задана, библиотека использует алгоритм автоматического выбора:

  1. Вычисление видимой области: Intro.js определяет размеры окна браузера (viewport) и координаты целевого элемента.
  2. Определение доступного пространства вокруг элемента в четырёх направлениях.
  3. Приоритет по вместимости: выбирается позиция, где подсказка полностью помещается, минимизируя выход за границы видимой области.
  4. Финальная корректировка: если подсказка не помещается ни в одной позиции, используется позиция с наименьшим перекрытием и добавляется прокрутка при необходимости.

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

Использование параметра position и автоматический режим

При создании шага можно указать position:

introJs().setOptions({
  steps: [
    {
      element: '#myButton',
      intro: 'Нажмите эту кнопку, чтобы продолжить',
      position: 'auto'
    }
  ]
}).start();

Значение auto активирует автоматический выбор позиции, основанный на описанном выше алгоритме. Если указаны конкретные позиции (top, right и т.д.), Intro.js будет использовать их как приоритетные, но если выбран auto, библиотека динамически подбирает оптимальное расположение.

Учет ограничений и адаптивность

Intro.js учитывает:

  • Границы контейнеров: подсказка не выходит за пределы родительских элементов с ограниченной видимой областью.
  • Прокрутку страницы: если элемент находится вне текущей области видимости, библиотека автоматически скроллит страницу к нему.
  • Масштабирование и адаптивный дизайн: при изменении размера окна подсказка пересчитывает позицию, оставаясь корректно привязанной к элементу.
window.addEventListener('resize', function() {
  introJs().refresh();
});

Метод refresh() пересчитывает позиции всех активных шагов, что особенно важно для мобильных интерфейсов и динамических элементов.

Кастомизация поведения

Можно расширить стандартное поведение через параметры:

  • tooltipClass — добавление собственных CSS-классов для изменения визуальной позиции или анимации.
  • positionPrecedence — массив приоритетов, позволяющий задать порядок, в котором Intro.js проверяет возможные позиции:
introJs().setOptions({
  steps: [{
    element: '#menu',
    intro: 'Главное меню',
    position: 'auto',
    positionPrecedence: ['bottom', 'right', 'top', 'left']
  }]
}).start();

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

Особенности при сложной верстке

  1. Элементы с overflow: hidden: автоматическое позиционирование может обрезать подсказку. Решение — использовать scrollToElement: true и увеличить padding вокруг контейнера.
  2. Модальные окна и динамически появляющиеся элементы: необходимо инициализировать Intro.js после полной отрисовки элемента, чтобы координаты вычислялись корректно.
  3. Вложенные элементы: подсказка привязывается к видимым координатам элемента на странице, а не к его родителю, что позволяет корректно работать с компонентами внутри сложной сетки.

Примеры динамической автоматизации

Для сложных интерфейсов можно использовать событие onbeforechange, чтобы динамически изменять подсказку или принудительно пересчитывать позицию:

introJs().onbeforechange(function(targetElement) {
  if (targetElement.id === 'dynamicSection') {
    introJs().refresh();
  }
});

Это позволяет корректно обрабатывать элементы, появляющиеся после AJAX-загрузки или анимаций.

Ключевые моменты

  • Автоматическая позиция минимизирует перекрытие и обеспечивает видимость подсказки.
  • Алгоритм учитывает пространство вокруг элемента, размеры окна и ограничения контейнеров.
  • Методы refresh() и события onbeforechange позволяют поддерживать корректное позиционирование при динамических изменениях страницы.
  • Кастомизация через positionPrecedence и CSS-классы даёт полный контроль над визуальным поведением подсказок.

Автоматическое позиционирование — один из самых сильных инструментов Intro.js, позволяющий создавать интуитивные и адаптивные интерактивные руководства без необходимости вручную управлять расположением каждой подсказки.

Оглавление