RTL поддержка

Tippy.js, как современная библиотека для создания всплывающих подсказок и тултипов в JavaScript, предоставляет широкие возможности для адаптации интерфейсов, включая поддержку языков с направлением письма справа налево (Right-to-Left, RTL). Правильная интеграция RTL критически важна для веб-приложений, ориентированных на арабский, иврит, персидский и другие языки с нестандартным направлением текста.

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

Tippy.js использует Popper.js под капотом для позиционирования тултипов. Popper.js автоматически определяет направление в зависимости от свойства dir родительского элемента:

<div dir="rtl">
  <button id="btn">Наведи на меня</button>
</div>
<script>
  tippy('#btn', {
    content: 'Пример RTL тултипа',
    placement: 'right'
  });
</script>

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

  • Если элемент находится внутри контейнера с dir="rtl", Tippy.js корректно меняет стороны тултипа: left становится right и наоборот.
  • Поправки работают только для стандартных положений (top, bottom, left, right и их вариаций с -start/-end).

Использование placement с RTL

В Tippy.js предусмотрены расширенные варианты placement:

  • start и end заменяют left и right в зависимости от направления документа.

  • В RTL-среде:

    Позиция RTL интерпретация
    top-start Верхний правый угол
    top-end Верхний левый угол
    bottom-start Нижний правый угол
    bottom-end Нижний левый угол

Пример:

tippy('#btn', {
  content: 'Тултип с RTL поддержкой',
  placement: 'bottom-start'
});

Если контейнер имеет dir="rtl", тултип появится справа внизу кнопки.

Принудительная установка направления

Иногда необходимо игнорировать автоматическое определение и задать направление вручную. Для этого Tippy.js поддерживает опцию popperOptions:

tippy('#btn', {
  content: 'Тултип с ручным направлением',
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['left', 'right'] // меняем позиции вручную
        }
      }
    ]
  }
});

Это полезно для сложных интерфейсов, где контейнер имеет смешанное направление текста или динамическое изменение dir.

Стилизация RTL тултипов

Tippy.js позволяет управлять стилями через CSS. Для RTL можно использовать селектор [dir="rtl"]:

[dir="rtl"] .tippy-box {
  text-align: right;
  direction: rtl;
}

Дополнительно рекомендуется проверять отступы для стрелки (arrow) и внутренних элементов тултипа:

[dir="rtl"] .tippy-arrow {
  left: auto;
  right: 0;
}

Это гарантирует, что стрелка корректно отображается на противоположной стороне тултипа.

Динамическое переключение RTL/LTR

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

const tip = tippy('#btn', {
  content: 'Динамический RTL',
  placement: 'bottom-start'
});

// Переключение направления
function switchDirection(isRTL) {
  document.getElementById('container').dir = isRTL ? 'rtl' : 'ltr';
  tip.setProps({ placement: 'bottom-start' }); // пересчет позиции
}

Tippy.js автоматически пересчитывает позицию тултипа при изменении placement или свойств Popper.js.

Поддержка анимаций и трансформаций

RTL может влиять на направление анимаций. Например, стандартная анимация shift-away смещается в сторону start. Для RTL:

tippy('#btn', {
  content: 'RTL анимация',
  animation: 'shift-away',
  placement: 'left-start' // будет скорректировано в RTL
});

Popper.js автоматически корректирует смещение, но при кастомных анимациях важно учитывать изменение transform-origin:

[dir="rtl"] .tippy-box[data-animation~='shift-away'] {
  transform-origin: right center !important;
}

Итоговые рекомендации по RTL в Tippy.js

  • Всегда используйте dir="rtl" на контейнере для автоматической адаптации.
  • Предпочитайте start и end вместо left/right.
  • Для динамического интерфейса используйте метод setProps.
  • Настраивайте CSS для текста и стрелок в RTL.
  • Проверяйте кастомные анимации, особенно смещения и точки трансформации.

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

Оглавление