Приоритет позиций

Tooltipster — это мощная библиотека для создания всплывающих подсказок в JavaScript, которая позволяет точно контролировать позиционирование тултипов относительно элементов. Одним из ключевых аспектов является настройка приоритета позиций, чтобы тултип отображался оптимально даже в условиях ограниченного пространства.

Параметр side и его роль

Каждый тултип может быть показан с различных сторон элемента:

  • top — сверху
  • bottom — снизу
  • left — слева
  • right — справа

По умолчанию Tooltipster использует значение, указанное в опции side, чтобы определить основное направление отображения. Однако при ограниченном месте браузер может автоматически выбрать другую позицию. Для точного управления порядком приоритетов используется опция sidePriority.

Опция sidePriority

sidePriority принимает массив строк, задающий приоритетные позиции для тултипа. Например:

$('#example').tooltipster({
  content: 'Подсказка с приоритетом',
  side: 'top',
  sidePriority: ['top', 'right', 'bottom', 'left']
});

В этом случае Tooltipster будет сначала пытаться показать тултип сверху (top). Если сверху нет достаточного пространства, библиотека проверит справа (right), затем снизу (bottom) и только потом слева (left).

Важно: порядок элементов в массиве определяет строгое предпочтение.

Комбинирование side и sidePriority

Опция side задает начальную предпочтительную сторону, а sidePriority — полный список вариантов, которые Tooltipster может использовать при размещении тултипа. Это позволяет управлять адаптивностью подсказок в динамических интерфейсах:

$('#adaptive').tooltipster({
  content: 'Адаптивный тултип',
  side: 'bottom',
  sidePriority: ['bottom', 'top']
});

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

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

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

$('#custom').tooltipster({
  content: 'Динамическая позиция',
  functionPosition: function(instance, helper, position){
    if(helper.geo.origin.offsetTop < 100){
      position.side = 'bottom';
    }
    return position;
  }
});

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

Свойства для точной настройки позиции

Помимо приоритета сторон, можно управлять отступами и смещениями:

  • distance — расстояние между тултипом и элементом
  • offsetX и offsetY — точные смещения по горизонтали и вертикали
  • viewportAware — автоматическое подстраивание тултипа под видимую область

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

$('#detailed').tooltipster({
  content: 'Точная настройка позиции',
  side: 'top',
  sidePriority: ['top', 'bottom', 'right', 'left'],
  distance: 10,
  offsetX: 5,
  offsetY: -5,
  viewportAware: true
});

Управление позициями для групп элементов

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

$('.buttons').tooltipster({
  content: 'Тултип для кнопок',
  side: 'right',
  sidePriority: ['right', 'bottom']
});

$('.inputs').tooltipster({
  content: 'Тултип для полей ввода',
  side: 'top',
  sidePriority: ['top', 'left']
});

Каждое правило работает локально, не влияя на другие тултипы.

Практические рекомендации

  • Использовать sidePriority, когда интерфейс адаптивный и размеры контейнеров могут меняться.
  • Комбинировать functionPosition с sidePriority для элементов, расположенных близко к краям окна.
  • Контролировать distance и offset для достижения точного визуального соответствия дизайну.
  • Проверять поведение тултипов на разных разрешениях и при скролле страницы.

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

Оглавление