Принудительная установка позиции

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

Основные параметры позиционирования

В Intro.js позиция подсказки определяется с помощью свойства position, которое может принимать следующие значения:

  • top — подсказка отображается над элементом
  • right — подсказка справа
  • bottom — подсказка снизу
  • left — подсказка слева
  • auto — автоматический выбор позиции в зависимости от пространства вокруг элемента

Принудительная установка позиции выполняется явно через объект конфигурации или через атрибуты HTML, что позволяет обойти автоматическое позиционирование.

Использование атрибутов HTML

Каждый шаг тура можно привязать к элементу с помощью атрибутов data-intro и data-position:

<button id="saveBtn" data-intro="Сохраняет изменения" data-position="right">
  Сохранить
</button>

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

Установка позиции через JavaScript

Если требуется динамически задать позицию подсказки, используется метод setOptions:

const intro = introJs();
intro.setOptions({
  steps: [
    {
      element: document.querySelector('#saveBtn'),
      intro: "Сохраняет изменения",
      position: 'right'
    },
    {
      element: document.querySelector('#deleteBtn'),
      intro: "Удаляет запись",
      position: 'left'
    }
  ]
});
intro.start();

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

Принудительная позиция для динамических элементов

Для элементов, которые появляются после загрузки страницы (например, модальные окна или динамически подгружаемые таблицы), позицию нужно задавать на момент вызова introJs(), когда элемент уже присутствует в DOM:

document.querySelector('#openModal').addEventListener('click', () => {
  const modalIntro = introJs();
  modalIntro.setOptions({
    steps: [
      {
        element: document.querySelector('#modalTitle'),
        intro: "Заголовок модального окна",
        position: 'bottom'
      }
    ]
  });
  modalIntro.start();
});

Если попытаться назначить позицию до появления элемента в DOM, подсказка не отобразится корректно.

Особенности работы с ограниченным пространством

Даже при принудительной установке позиции необходимо учитывать видимую область окна (viewport). Intro.js позволяет управлять поведением подсказки через параметр scrollToElement:

intro.setOptions({
  scrollToElement: true
});
  • true — автоматически скроллит страницу так, чтобы элемент оказался в видимой области
  • false — подсказка может появляться вне видимой области, что полезно для фиксированных элементов

Принудительное позиционирование в сочетании с scrollToElement: true обеспечивает надежное отображение подсказок независимо от положения страницы.

Использование кастомных позиций через CSS

Intro.js допускает переопределение стандартных позиций с помощью CSS. Каждый шаг получает класс вида introjs-tooltipReferenceLayer, который можно использовать для тонкой настройки:

.introjs-tooltipReferenceLayer {
  transform: translate(10px, 20px); /* Смещение подсказки */
}

Это позволяет корректировать положение подсказки в пикселях, когда стандартные опции top/right/bottom/left недостаточны.

Советы по выбору позиции

  1. Сохранять читаемость — подсказка не должна перекрывать ключевой элемент интерфейса.
  2. Учитывать адаптивность — при изменении размеров окна стоит проверять, чтобы подсказка оставалась видимой.
  3. Использовать комбинацию position и scrollToElement — особенно важно для длинных страниц и модальных окон.
  4. Динамические элементы — всегда задавать позицию после появления элемента в DOM.

Принудительное управление позицией подсказок в Intro.js обеспечивает полный контроль над визуальным представлением тура, минимизируя ошибки автоматического позиционирования и улучшая восприятие интерфейса пользователем.

Оглавление