Управление позицией подсказок

В Intro.js позиция подсказки определяется свойством position в объекте шага (step). Доступны стандартные значения:

top – подсказка отображается над элементом.
bottom – подсказка отображается под элементом.
left – слева от элемента.
right – справа от элемента.
auto – библиотека самостоятельно выбирает оптимальное расположение с учётом видимости элемента на экране.

Пример настройки шага с определением позиции:

introJs().setOptions({
  steps: [
    {
      element: '#menu',
      intro: 'Это главное меню.',
      position: 'right'
    },
    {
      element: '#content',
      intro: 'Здесь отображается основной контент.',
      position: 'bottom'
    }
  ]
}).start();

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

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

{
  element: '#footer',
  intro: 'Подвал страницы с контактами.',
  position: 'auto'
}

При выборе auto библиотека проверяет доступное пространство вокруг элемента и выставляет подсказку так, чтобы она не выходила за пределы окна.

Принудительное смещение подсказки

Для точной настройки позиции используется свойство tooltipClass вместе с кастомными CSS. Это позволяет сдвигать подсказку на определённое расстояние:

{
  element: '#button',
  intro: 'Кнопка действия.',
  position: 'right',
  tooltipClass: 'custom-tooltip'
}

.custom-tooltip {
  margin-left: 20px; /* сдвиг вправо */
  margin-top: -10px; /* сдвиг вверх */
}

Динамическая смена позиции во время показа

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

const intro = introJs();
intro.setOptions({
  steps: [
    { element: '#header', intro: 'Заголовок сайта', position: 'top' },
    { element: '#sidebar', intro: 'Боковая панель', position: 'left' }
  ]
});

intro.onafterchange(function(targetElement) {
  if (window.innerWidth < 768) {
    intro.setOptions({
      steps: [
        { element: '#header', intro: 'Заголовок сайта', position: 'bottom' },
        { element: '#sidebar', intro: 'Боковая панель', position: 'bottom' }
      ]
    });
  }
});

intro.start();

Такой подход обеспечивает адаптивное позиционирование подсказок на мобильных устройствах.

Пользовательские стрелки и смещение тултипов

Для более сложных интерфейсов можно использовать кастомные стрелки и CSS-подстройки. Основные селекторы:

.introjs-tooltip – контейнер подсказки.
.introjs-arrow – стрелка подсказки.

Пример смещения стрелки и подсказки:

.introjs-tooltip.custom-arrow {
  transform: translateX(10px);
}

.introjs-tooltip.custom-arrow .introjs-arrow {
  left: 10px;
}

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

Контекстное позиционирование

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

introJs().setOptions({
  steps: [
    {
      element: '#dynamic-section',
      intro: 'Элемент с динамической позицией',
      position: 'right'
    }
  ],
  scrollToElement: true
}).start();

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

Использование `position: floating`

В последних версиях библиотеки поддерживается специальная позиция floating, позволяющая вручную задавать координаты подсказки через CSS, не привязываясь к элементу:

{
  element: '#canvas',
  intro: 'Плавающая подсказка',
  position: 'floating',
  tooltipClass: 'floating-tooltip'
}

.floating-tooltip {
  position: absolute;
  top: 150px;
  left: 400px;
}

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