Смещение подсказок относительно элемента

Библиотека Intro.js предоставляет удобные средства для создания интерактивных туров по интерфейсу. Одной из ключевых возможностей является точное управление положением подсказки относительно целевого элемента. По умолчанию подсказка располагается в стандартной позиции (bottom, top, left, right), но в реальных интерфейсах часто требуется её точное смещение для корректного отображения.

Использование параметра `position` и смещение

Каждый шаг тура в Intro.js описывается объектом с набором опций. Классическая настройка позиции осуществляется через:

intro.addStep({
  element: '#myElement',
  intro: 'Описание элемента',
  position: 'right'
});

Параметр position может принимать значения: top, bottom, left, right, auto. Однако, иногда стандартной позиции недостаточно, особенно если элемент расположен близко к краю окна. Для этих случаев используется возможность тонкой настройки смещения.

Смещение через `tooltipClass` и CSS

Intro.js позволяет назначать каждому шагу кастомный класс подсказки:

intro.addStep({
  element: '#myElement',
  intro: 'Описание с кастомным смещением',
  position: 'right',
  tooltipClass: 'custom-tooltip-offset'
});

В CSS можно задать конкретные отступы с помощью свойств margin или transform:

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

Использование transform: translate(x, y) позволяет более гибко управлять позицией без нарушения анимации Intro.js:

.custom-tooltip-offset {
  transform: translate(15px, -10px);
}

Программное смещение через события Intro.js

Intro.js предоставляет события, которые срабатывают перед показом подсказки (onbeforechange) и после её отображения (onafterchange). Они позволяют динамически корректировать позицию:

intro.onafterchange(function(targetElement) {
  const tooltip = document.querySelector('.introjs-tooltip');
  if (tooltip) {
    // Смещение на 30px вправо и 15px вниз
    tooltip.style.transform = 'translate(30px, 15px)';
  }
});

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

Использование `position: auto` с учётом смещения

Параметр auto автоматически выбирает оптимальное положение подсказки. Чтобы комбинировать авто-позиционирование с тонким смещением:

intro.addStep({
  element: '#dynamicElement',
  intro: 'Автоматическое позиционирование с коррекцией',
  position: 'auto',
  tooltipClass: 'auto-offset'
});

.auto-offset {
  transform: translateX(10px); /* небольшое горизонтальное смещение */
}

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

Смещение стрелки подсказки

Иногда требуется отдельно смещать стрелку подсказки, чтобы она точно указывала на элемент:

.custom-tooltip-offset .introjs-arrow {
  margin-left: 10px; /* смещаем стрелку вправо */
  margin-top: -5px;  /* смещаем стрелку вверх */
}

Сочетание смещения тултипа и стрелки обеспечивает точное позиционирование даже в сложных интерфейсах.

Динамическое вычисление смещения

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

intro.onafterchange(function(targetElement) {
  const rect = targetElement.getBoundingClientRect();
  const tooltip = document.querySelector('.introjs-tooltip');

  if (tooltip) {
    const offsetX = rect.width / 2; // смещение на половину ширины элемента
    const offsetY = -rect.height / 2; // смещение вверх на половину высоты
    tooltip.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
  }
});

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

Смещение подсказок относительно элемента

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

Смещение через tooltipClass и CSS