Локализация содержимого

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

Использование функции `content` для динамического текста

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

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

const translations = {
  en: {
    tooltip: "Click to submit"
  },
  ru: {
    tooltip: "Нажмите для отправки"
  },
  fr: {
    tooltip: "Cliquez pour soumettre"
  }
};

const currentLang = 'ru'; // динамически определяется в приложении

tippy('#submitButton', {
  content: () => translations[currentLang].tooltip,
  placement: 'top',
  theme: 'light'
});

Преимущества использования функции для content:

Поддержка изменения языка в реальном времени.
Возможность подключения сторонних систем локализации (например, i18next, Polyglot.js).
Легкая интеграция с динамическим состоянием приложения.

Интерполяция динамических данных

В тултипах часто нужно отображать переменные данные, например, имя пользователя или число элементов. Для локализации важно правильно форматировать строки с параметрами. Tippy.js позволяет передавать HTML или текст через функцию content:

const translations = {
  ru: {
    items: "У вас {count} новых сообщений"
  }
};

function localize(template, params) {
  return template.replace(/\{(\w+)\}/g, (_, key) => params[key] || '');
}

const messagesCount = 5;
const currentLang = 'ru';

tippy('#messagesButton', {
  content: () => localize(translations[currentLang].items, { count: messagesCount }),
  placement: 'bottom'
});

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

Поддерживается безопасная подстановка параметров.
Возможность использовать разные форматы для разных языков (например, склонения и падежи в русском языке).

Локализация HTML-контента

Tippy.js поддерживает использование HTML для создания сложных подсказок с форматированием. Для локализации важно, чтобы HTML-шаблоны не нарушали структуру документа. Можно использовать функцию content с возвращаемым элементом DOM:

const translations = {
  ru: {
    tooltipHTML: `<strong>Важная информация:</strong> действие завершено`
  }
};

tippy('#infoButton', {
  allowHTML: true,
  content: () => {
    const container = document.createElement('div');
    container.innerHTML = translations['ru'].tooltipHTML;
    return container;
  }
});

Рекомендации:

Использовать allowHTML: true только при проверенных источниках HTML.
Для безопасной локализации избегать прямого вставления данных от пользователя без экранирования.

Динамическая смена языка

Tippy.js позволяет обновлять содержимое после создания через метод setContent. Это полезно, если пользователь меняет язык на лету:

const tooltipInstance = tippy('#saveButton', {
  content: translations['en'].tooltip
});

// смена языка на русский
tooltipInstance.setContent(translations['ru'].tooltip);

Преимущества такого подхода:

Не нужно пересоздавать тултип при смене языка.
Поддерживаются анимации и текущие позиции тултипа без перерисовки.

Интеграция с библиотеками локализации

Для крупных приложений рекомендуется использовать специализированные библиотеки локализации, такие как i18next или Polyglot.js. Tippy.js прекрасно сочетается с ними:

import i18next from 'i18next';

tippy('#profileButton', {
  content: () => i18next.t('tooltip.profile'),
  placement: 'right'
});

// смена языка
i18next.changeLanguage('ru');

Преимущества интеграции:

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

Поддержка RTL и адаптивных направлений

Для языков с правосторонним письмом (например, арабский, иврит) важно корректно отображать тултипы. В Tippy.js можно использовать комбинацию placement и CSS-классов для адаптации:

tippy('#rtlButton', {
  content: 'مثال',
  placement: 'left-start', // корректное расположение для RTL
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        options: { fallbackPlacements: ['right-start'] }
      }
    ]
  }
});