Стратегии позиционирования

Библиотека Tippy.js предоставляет гибкий механизм управления положением всплывающих подсказок относительно элементов DOM. Понимание стратегий позиционирования критически важно для корректного отображения тултипов в различных сценариях интерфейса.

Атрибут placement

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

  • top, top-start, top-end
  • bottom, bottom-start, bottom-end
  • left, left-start, left-end
  • right, right-start, right-end

Пример:

tippy('#button', {
  content: 'Подсказка сверху',
  placement: 'top'
});

top-start и top-end позволяют смещать тултип по горизонтали относительно верхней границы элемента, аналогично для других направлений.

Стратегия смещения через offset

Опция offset позволяет точнее контролировать расстояние между элементом и подсказкой. Принимает массив [skidding, distance]:

  • skidding — смещение по оси элемента (например, по горизонтали для вертикальных тултипов)
  • distance — расстояние от элемента до тултипа
tippy('#button', {
  content: 'Смещённая подсказка',
  placement: 'bottom',
  offset: [10, 20]
});

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

Плагин flip (по умолчанию включён) автоматически изменяет положение подсказки, если выбранное место не помещается на экране. В конфигурации можно управлять логикой:

tippy('#button', {
  content: 'Авто-позиция',
  placement: 'top',
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['bottom', 'right', 'left'],
          padding: 10
        }
      }
    ]
  }
});
  • fallbackPlacements — список альтернативных позиций при нехватке места
  • padding — минимальное расстояние от границ окна

Стратегия preventOverflow

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

tippy('#button', {
  content: 'Не вылезет за окно',
  popperOptions: {
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          padding: 8,
          boundary: 'viewport'
        }
      }
    ]
  }
});
  • boundary — ограничение (viewport, window, элемент)
  • padding — отступ от границы

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

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

tippy('#button', {
  content: 'Следит за курсором',
  followCursor: true,
  placement: 'top'
});
  • followCursor: true — тултип привязывается к координатам курсора
  • placement задаёт предпочтительное направление, но тултип будет динамически адаптироваться

Комбинирование стратегий

Для сложных интерфейсов часто используется комбинация placement, offset, flip и preventOverflow. Например, для панели с ограниченной шириной:

tippy('#menu-item', {
  content: 'Подсказка с защитой от выхода',
  placement: 'right-start',
  offset: [0, 5],
  popperOptions: {
    modifiers: [
      { name: 'flip', options: { fallbackPlacements: ['left-start'] } },
      { name: 'preventOverflow', options: { boundary: 'viewport', padding: 5 } }
    ]
  }
});

Настройка позиционирования для нескольких элементов

Можно задавать стратегию индивидуально для каждого элемента с помощью функции:

tippy('.tooltip', {
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
  placement(reference) {
    return reference.dataset.placement || 'top';
  }
});

Это позволяет:

  • Разным кнопкам иметь разные позиции
  • Использовать атрибуты HTML для конфигурации без изменения JS

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

  • Всегда задавать placement и offset для критичных элементов — предотвращает неожиданные перекрытия
  • Использовать flip для адаптивных интерфейсов
  • Комбинировать с preventOverflow при работе с модальными окнами и контейнерами фиксированной ширины
  • Для интерактивных тултипов с динамическими элементами лучше подключать followCursor или программно обновлять позицию

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

Оглавление