Управление позиционированием

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

driver.highlight({
    element: '#button',
    popover: {
        title: 'Кнопка отправки',
        description: 'Нажмите здесь для отправки формы',
        position: 'bottom'
    }
});

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

Driver.js пытается позиционировать подсказку в указанном месте, но при недостатке пространства автоматически выбирает альтернативное положение, чтобы подсказка не выходила за пределы видимой области. Если важна строгая фиксация позиции, можно использовать параметр allowClose: false вместе с кастомным вычислением позиции через событие onHighlightStarted.

Тонкая настройка с padding и offset

Для контроля расстояния между подсказкой и элементом используется padding:

  • padding – отступ вокруг целевого элемента, чтобы подсветка не прилегала вплотную.
  • offset – сдвиг подсказки относительно позиции по осям X и Y.
driver.highlight({
    element: '#menu',
    popover: {
        title: 'Меню навигации',
        description: 'Выберите раздел для перехода',
        position: 'right',
        padding: 10,
        offset: { top: 5, left: 15 }
    }
});

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

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

Driver.js предоставляет события onHighlightStarted и onNext, которые позволяют динамически менять позицию подсказки:

driver.on('highlight:start', (element, popover) => {
    if (window.innerWidth < 768) {
        popover.position = 'bottom';
    }
});

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

Поддержка кастомного позиционирования

Для полного контроля можно использовать метод popover.position с функцией:

driver.highlight({
    element: '#feature',
    popover: {
        title: 'Особенность',
        description: 'Описание функции',
        position: (element, popoverNode) => {
            const rect = element.getBoundingClientRect();
            return rect.top < 100 ? 'bottom' : 'top';
        }
    }
});

Функция получает объект элемента и DOM-узел подсказки, возвращая позицию как строку. Это позволяет учитывать реальные размеры элементов и окна браузера при расчете расположения.

Автоматическое подстраивание при скролле

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

  • scrollIntoView: true – автоматически прокручивает страницу, чтобы элемент оказался в видимой области.
  • scrollPadding: 20 – задает минимальный отступ между элементом и краем окна при прокрутке.
driver.highlight({
    element: '#footer',
    popover: {
        title: 'Подвал',
        description: 'Ссылки на ресурсы',
        position: 'top'
    },
    scrollIntoView: true,
    scrollPadding: 30
});

Адаптация позиции под разные разрешения экрана

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

let position = window.innerWidth < 1024 ? 'bottom' : 'right';
driver.highlight({
    element: '#sidebar',
    popover: { title: 'Боковая панель', description: 'Меню сайта', position }
});

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

Практические советы по позиционированию

  1. Минимизировать перекрытия: всегда проверять, чтобы подсказка не закрывала интерактивные элементы.
  2. Использовать padding для визуальной гармонии: даже 5–10px отступа делают подсказку более читаемой.
  3. Комбинировать позиции и события: для адаптивных интерфейсов лучше задавать базовую позицию и изменять её через события.
  4. Тестировать на разных разрешениях: Driver.js учитывает размеры окна, поэтому важно проверять, как подсказки ведут себя на мобильных устройствах.

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

Оглавление