Позиционирование хинтов

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

Доступные позиции хинтов

Intro.js поддерживает несколько базовых направлений хинтов:

  • top — подсказка отображается над элементом.
  • bottom — подсказка появляется под элементом.
  • left — хинт размещается слева от элемента.
  • right — хинт размещается справа от элемента.

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

Установка позиции через атрибуты

Для простого хинта позиция задается следующим образом:

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

Здесь data-hint-position="top" указывает, что подсказка будет отображаться над кнопкой. Если атрибут не указан, Intro.js по умолчанию размещает хинт сверху (top), автоматически корректируя положение при пересечении границ экрана.

Программное управление позиционированием

Хинты можно добавлять и настраивать динамически через API:

introJs().addHints([{
    element: '#saveBtn',
    hint: 'Сохранить изменения',
    hintPosition: 'right'
}, {
    element: '#cancelBtn',
    hint: 'Отменить изменения',
    hintPosition: 'bottom'
}]).showHints();

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

  • element — CSS-селектор или DOM-элемент, к которому привязывается хинт.
  • hint — текст подсказки.
  • hintPosition — направление отображения (top, bottom, left, right).

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

Автоматическая адаптация и смещение

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

  • top → bottom, если сверху нет места.
  • left → right, если элемент примыкает к левому краю экрана.

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

introJs().addHints([{
    element: '#saveBtn',
    hint: 'Сохранить изменения',
    hintPosition: 'top',
    hintOffset: 10
}]).showHints();

Значение hintOffset позволяет компенсировать перекрытие контента или добавить визуальный отступ для эстетики.

Работа с адаптивными интерфейсами

В интерфейсах с изменяемыми размерами элементов и динамическими layout’ами критично корректировать позицию хинтов при изменении размеров окна. Для этого используется метод refreshHints():

window.addEventListener('resize', function() {
    introJs().refreshHints();
});

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

Сочетание с подсветкой элементов

Intro.js позволяет сочетать хинты с подсветкой элементов через highlightClass:

introJs().addHints([{
    element: '#saveBtn',
    hint: 'Сохранить изменения',
    hintPosition: 'right',
    highlightClass: 'highlighted'
}]).showHints();

Подсветка вместе с правильным позиционированием повышает наглядность и фокус внимания пользователя на ключевых элементах интерфейса.

Рекомендации по выбору позиции

  • Использовать top и bottom для элементов, где важен вертикальный поток информации.
  • Использовать left и right для узких элементов или панелей управления.
  • Проверять адаптивность: хинты должны оставаться видимыми при любых размерах окна.
  • В случае сложных макетов комбинировать hintOffset с динамическим перерасчетом через refreshHints().

Примеры сложного позиционирования

Для элементов, расположенных в углах экрана:

introJs().addHints([{
    element: '#cornerBtn',
    hint: 'Эта кнопка в углу',
    hintPosition: 'left',
    hintOffset: 15
}]).showHints();

Даже при недостатке места библиотека корректно подстроит отображение, избегая выхода хинта за пределы окна.

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

Оглавление