Установка через CDN

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

Подключение скрипта

CDN предоставляет готовую версию библиотеки в виде UMD-модуля. Для подключения достаточно вставить тег <script> в HTML-документ:

<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@2.13.0/dist/floating-ui.dom.min.js"></script>

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

Проверка версии

Для уверенности, что библиотека загружена корректно, можно вывести её версию:

<script>
  console.log(FloatingUIDOM.version);
</script>

Если в консоли отобразится версия, значит библиотека доступна и готова к использованию.

Использование модулей через CDN

Floating UI включает несколько ключевых модулей, которые позволяют управлять позиционированием и поведением всплывающих элементов:

  • computePosition — основная функция для расчёта позиции элемента относительно целевого.
  • offset — модификатор для добавления смещения по оси X или Y.
  • flip — автоматический переворот всплывающего элемента при недостатке места.
  • shift — смещение элемента внутри контейнера для предотвращения выхода за границы.
  • arrow — позиционирование стрелки, указывающей на элемент.

Пример подключения и использования через CDN:

<div id="button">Нажми меня</div>
<div id="tooltip" style="position:absolute;">Всплывающая подсказка</div>

<script>
  const button = document.getElementById('button');
  const tooltip = document.getElementById('tooltip');

  button.addEventListener('mouseenter', async () => {
    const { x, y } = await FloatingUIDOM.computePosition(button, tooltip, {
      middleware: [
        FloatingUIDOM.offset(8),
        FloatingUIDOM.flip(),
        FloatingUIDOM.shift({ padding: 5 })
      ],
    });

    Object.assign(tooltip.style, {
      left: `${x}px`,
      top: `${y}px`,
    });
  });

  button.addEventListener('mouseleave', () => {
    tooltip.style.left = '-9999px';
    tooltip.style.top = '-9999px';
  });
</script>

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

Особенности работы через CDN

  • Глобальный объект — при подключении через CDN все функции доступны через FloatingUIDOM.
  • Отсутствие tree shaking — вся библиотека загружается целиком, что увеличивает размер скрипта.
  • Совместимость — работает в любых современных браузерах без дополнительной конфигурации.
  • Версионирование — желательно указывать конкретную версию, чтобы избежать неожиданного изменения API при обновлении:
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@2.13.0/dist/floating-ui.dom.min.js"></script>

Дополнительные возможности

CDN-версия позволяет подключать модификаторы и расширения без установки через npm. Например, можно использовать готовый модификатор autoPlacement, который автоматически выбирает сторону для отображения:

FloatingUIDOM.computePosition(button, tooltip, {
  middleware: [FloatingUIDOM.autoPlacement()]
});

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

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

Использование Floating UI через CDN обеспечивает быстрый старт и простую интеграцию в проекты без сборщиков, при этом остаётся доступен весь функционал позиционирования и гибкая настройка поведения всплывающих элементов.

Оглавление