Выравнивание относительно элемента

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

Синтаксис:

const driver = new Driver();

driver.defineSteps([
  {
    element: '#target-element',
    popover: {
      title: 'Заголовок',
      description: 'Описание элемента',
      position: 'top'
    }
  }
]);

driver.start();

Здесь ключевой момент — свойство position в объекте popover.

Доступные варианты выравнивания

Driver.js поддерживает следующие позиции подсказки:

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

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

Динамическое выравнивание

Если целевой элемент находится близко к краю окна, указанный position может вызвать обрезку подсказки. Для таких случаев используется опция onNext или padding для автоматического смещения:

driver.defineSteps([
  {
    element: '#button',
    popover: {
      title: 'Кнопка отправки',
      description: 'Эта кнопка отправляет форму',
      position: 'top'
    },
    onNext: function() {
      console.log('Переходим к следующему шагу');
    },
    padding: 10 // минимальное расстояние от края окна
  }
]);

Свойство padding гарантирует, что подсказка не налезет на границы окна.

Управление смещением относительно элемента

Для более точного контроля над расположением подсказки используется свойство offset в комбинации с CSS-классами. Оно позволяет смещать поповер по горизонтали и вертикали:

driver.defineSteps([
  {
    element: '#menu',
    popover: {
      title: 'Меню',
      description: 'Основное меню навигации',
      position: 'right',
      offset: 20 // смещение вправо на 20px
    }
  }
]);

Особенности:

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

Адаптивное выравнивание

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

driver.defineSteps([
  {
    element: '#input-field',
    popover: {
      title: 'Поле ввода',
      description: 'Введите данные здесь',
      position: 'bottom'
    }
  }
]);

driver.start();

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

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

  1. Минимизировать перекрытие элементов — выбирать position так, чтобы подсказка не заслоняла важные части интерфейса.
  2. Использовать смещение — offset помогает корректировать визуальные ошибки, особенно при фиксированных или анимированных элементах.
  3. Адаптивность — проверять, как подсказка ведет себя при разных размерах окна, и при необходимости использовать динамическое определение позиции через колбек.
  4. Комбинированные позиции — top-left и right-bottom особенно полезны для сложных макетов с ограниченным пространством.

Пример комплексного шага с точным выравниванием

driver.defineSteps([
  {
    element: '#profile-avatar',
    popover: {
      title: 'Аватар пользователя',
      description: 'Здесь отображается ваша фотография',
      position: 'left-top',
      offset: 15
    },
    padding: 10
  }
]);

driver.start();

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

Использование правильного выравнивания в Driver.js обеспечивает профессиональный вид интерфейсных гидов и улучшает взаимодействие пользователя с приложением.

Оглавление