Доступные позиции подсказок

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

Атрибут data-position

Основной способ указания позиции подсказки — использование атрибута data-position на HTML-элементе:

<button data-intro="Это кнопка отправки" data-position="right">Отправить</button>

Возможные значения data-position:

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

Пример с несколькими элементами:

<div data-intro="Это заголовок" data-position="bottom">Заголовок</div>
<input type="text" data-intro="Введите имя" data-position="right">
<button data-intro="Сохранить данные" data-position="top">Сохранить</button>

Настройка позиции через JavaScript

Вместо HTML-атрибутов можно задавать позиции программно через объект настроек при инициализации тура:

introJs()
  .setOptions({
    steps: [
      {
        element: '#header',
        intro: 'Заголовок страницы',
        position: 'bottom'
      },
      {
        element: '#input-name',
        intro: 'Поле для ввода имени',
        position: 'right'
      },
      {
        element: '#submit-btn',
        intro: 'Нажмите для отправки',
        position: 'top'
      }
    ]
  })
  .start();

Использование position в настройках шагов позволяет гибко управлять расположением подсказок для каждого элемента.

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

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

  1. Свободное пространство над, под, слева и справа от элемента.
  2. Размер подсказки и размеры видимой области браузера.
  3. Перекрытие других элементов на странице.

Пример использования:

<button data-intro="Подсказка подбирает место сама" data-position="auto">
  Авто-позиция
</button>

В этом случае подсказка будет смещена на сторону с максимальным свободным пространством.

Настройка смещения (data-tooltipClass и CSS)

Иногда стандартные позиции top, right, bottom, left нужно дополнительно корректировать для точного выравнивания. Для этого можно использовать собственный CSS через класс:

<button data-intro="Сдвинутая подсказка" data-position="right" data-tooltipClass="custom-tooltip">
  Кнопка
</button>
.custom-tooltip {
  transform: translate(10px, 0); /* смещение вправо на 10px */
}

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

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

Позицию подсказки можно изменять в процессе работы тура с помощью методов Intro.js:

var intro = introJs();
intro.start();

// Через событие изменения шага
intro.onbeforechange(function(targetElement) {
  if (targetElement.id === 'special-button') {
    intro._options.steps[intro._currentStep].position = 'left';
  }
});

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

Ограничения и рекомендации

  • Не использовать слишком длинные подсказки с маленьким элементом, иначе подсказка может выходить за пределы окна даже с auto.
  • Учитывать прокрутку страницы, так как подсказка всегда позиционируется относительно видимой области.
  • Проверять мобильные устройства, где размеры экранов и доступное пространство сильно отличаются. Использование auto почти всегда предпочтительнее на мобильных экранах.

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

Оглавление