Плагин inlinePositioning

Плагин inlinePositioning в библиотеке Tippy.js предназначен для корректного позиционирования тултипов, привязанных к встроенным (inline) элементам. В отличие от блочных элементов, встроенные элементы могут занимать несколько строк, разрываться переносами и иметь сложную геометрию. Стандартные алгоритмы позиционирования не всегда учитывают эти особенности, что приводит к неточному размещению тултипа.

inlinePositioning решает эту проблему, позволяя вычислять позицию относительно конкретного фрагмента текста или части inline-элемента, а не всей его bounding-box области.

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

Встроенные элементы (<span>, <a>, <strong> и др.) могут:

  • переноситься на новую строку
  • иметь разрывы из-за ширины контейнера
  • визуально представлять собой несколько отдельных прямоугольников

При использовании стандартного позиционирования:

  • тултип центрируется относительно всей области элемента
  • игнорируется фактическое положение курсора или выделенного участка
  • возможны визуальные смещения (особенно в многострочном тексте)

Пример:

<p>
  Длинный текст с <span id="target">интерактивным элементом</span>, который может переноситься.
</p>

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

Принцип работы

Плагин использует API браузера getClientRects(), которое возвращает список прямоугольников, занимаемых inline-элементом. В зависимости от позиции курсора или выбранной стратегии, выбирается наиболее подходящий прямоугольник.

Ключевые особенности:

  • анализ нескольких rect-областей
  • выбор ближайшей области к точке взаимодействия
  • точное позиционирование тултипа

Подключение плагина

import tippy, { inlinePositioning } from 'tippy.js';

tippy('#target', {
  content: 'Tooltip',
  plugins: [inlinePositioning],
  inlinePositioning: true,
});

Важно:

  • плагин должен быть добавлен в массив plugins
  • свойство inlinePositioning должно быть явно включено

Поведение при наведении

При наведении на inline-элемент:

  1. Определяется точка взаимодействия (например, позиция курсора)
  2. Получаются все прямоугольники элемента (getClientRects)
  3. Выбирается ближайший прямоугольник
  4. Тултип позиционируется относительно выбранной области

Это особенно важно для:

  • длинных ссылок
  • текста с переносами
  • inline-элементов внутри абзацев

Пример с многострочным элементом

<style>
  .box {
    width: 150px;
  }
</style>

<div class="box">
  <span id="multi">
    Это длинный текст, который точно перенесётся на несколько строк
  </span>
</div>
tippy('#multi', {
  content: 'Многострочный tooltip',
  plugins: [inlinePositioning],
  inlinePositioning: true,
});

Результат:

  • тултип появляется рядом с той строкой, над которой находится курсор
  • отсутствует смещение в центр всей области

Взаимодействие с placement

inlinePositioning работает совместно с параметром placement, но уточняет точку привязки.

Пример:

tippy('#target', {
  content: 'Tooltip',
  placement: 'top',
  plugins: [inlinePositioning],
  inlinePositioning: true,
});

Даже при placement: 'top':

  • тултип будет отображаться сверху
  • но относительно конкретной строки, а не всей области элемента

Особенности работы с курсором

Плагин особенно эффективен при использовании followCursor:

import tippy, { inlinePositioning, followCursor } from 'tippy.js';

tippy('#target', {
  content: 'Tooltip',
  followCursor: true,
  plugins: [inlinePositioning, followCursor],
  inlinePositioning: true,
});

Комбинация даёт:

  • точное следование тултипа за курсором
  • корректную привязку к inline-геометрии

Ограничения

  • работает только с inline-элементами
  • требует поддержки getClientRects (поддерживается во всех современных браузерах)
  • может давать неожиданные результаты при сложной вложенности элементов

Производительность

Использование getClientRects():

  • немного дороже, чем getBoundingClientRect()
  • вызывает дополнительные вычисления при каждом взаимодействии

Однако:

  • влияние на производительность минимально
  • оправдано при работе с текстовыми интерфейсами

Практические сценарии применения

1. Подсказки в тексте

<p>
  Нажмите на <span class="hint">это слово</span> для подсказки.
</p>
tippy('.hint', {
  content: 'Дополнительная информация',
  plugins: [inlinePositioning],
  inlinePositioning: true,
});

2. Работа с длинными ссылками

<a href="#" id="link">
  Очень длинная ссылка, которая может переноситься на несколько строк
</a>

Без плагина:

  • тултип может появляться далеко от курсора

С плагином:

  • точное позиционирование рядом с текущей строкой

3. Интерактивные редакторы

В редакторах текста:

  • подсказки для слов
  • автодополнение
  • inline-валидаторы

inlinePositioning обеспечивает:

  • точную привязку к слову или части строки
  • корректное отображение при переносах

Сравнение поведения

Поведение Без inlinePositioning С inlinePositioning
Многострочный элемент центр всей области конкретная строка
Точность низкая высокая
Работа с курсором ограниченная точная
UX хуже лучше

Совместимость с другими плагинами

inlinePositioning корректно работает с:

  • followCursor
  • sticky
  • offset
  • flip
  • shift

Важно учитывать порядок подключения:

plugins: [inlinePositioning, followCursor]

Тонкости реализации

  • выбор rect происходит динамически при каждом событии
  • используется логика ближайшего совпадения координат
  • учитывается текущая позиция курсора или триггера

Когда использовать

Применение оправдано в случаях:

  • текст содержит переносы
  • элементы занимают несколько строк
  • важна точность позиционирования
  • интерфейс ориентирован на текст

Не требуется:

  • для блочных элементов
  • для фиксированных кнопок
  • для простых UI-компонентов

Итоговая конфигурация

import tippy, { inlinePositioning } from 'tippy.js';

tippy('.inline-element', {
  content: 'Точный tooltip',
  placement: 'top',
  plugins: [inlinePositioning],
  inlinePositioning: true,
});

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

Оглавление