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

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

Хранение локализованных данных

Для динамической смены языка удобно использовать объект с ключами, соответствующими языкам:

const tooltipsContent = {
  en: "Click here to submit",
  ru: "Нажмите здесь, чтобы отправить",
  es: "Haga clic aquí para enviar"
};

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

Инициализация Tippy.js

Tippy.js создаётся на элементах DOM с помощью вызова tippy(targets, options). При работе с динамическим языком важно, чтобы контент передавался через функцию:

const button = document.querySelector("#submitButton");

const tooltipInstance = tippy(button, {
  content: () => tooltipsContent[currentLanguage],
  placement: "top",
  animation: "scale"
});

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

Обновление языка после инициализации

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

function changeLanguage(lang) {
  currentLanguage = lang;
  tooltipInstance.setContent(tooltipsContent[lang]);
}

Этот подход работает как с одиночными тултипами, так и с массивом элементов:

const buttons = document.querySelectorAll(".tooltip-button");

const tooltips = tippy(buttons, {
  content: (reference) => tooltipsContent[currentLanguage],
  placement: "bottom"
});

function changeLanguageForAll(lang) {
  currentLanguage = lang;
  tooltips.forEach(instance => {
    instance.setContent(tooltipsContent[lang]);
  });
}

Использование атрибутов для хранения локализаций

Иногда удобно хранить локализованные строки прямо в HTML через data-attributes:

<button id="saveBtn"
        data-tooltip-en="Save changes"
        data-tooltip-ru="Сохранить изменения">
  Save
</button>

Инициализация с функцией для выбора языка:

const saveBtn = document.querySelector("#saveBtn");

const saveTooltip = tippy(saveBtn, {
  content: (el) => el.dataset[`tooltip${currentLanguage.toUpperCase()}`],
  placement: "right"
});

При смене языка достаточно вызвать:

saveTooltip.setContent(saveBtn.dataset[`tooltip${currentLanguage.toUpperCase()}`]);

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

Если проект использует библиотеки типа i18next или Vue I18n, Tippy.js отлично интегрируется, так как контент может быть функцией, возвращающей результат локализации:

const i18nTooltip = tippy(document.querySelector("#infoIcon"), {
  content: () => i18next.t('tooltip.info'),
  placement: "left"
});

i18next.on('languageChanged', () => {
  i18nTooltip.setContent(i18next.t('tooltip.info'));
});

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

Динамическое обновление контента при hover и событиях

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

const dynamicTooltip = tippy(button, {
  content: "",
  onShow(instance) {
    instance.setContent(tooltipsContent[currentLanguage]);
  }
});

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

Важные нюансы

  • Перегенерация тултипа не требуется. Использование setContent гораздо эффективнее и предотвращает мерцание.
  • Для массового обновления нескольких тултипов удобно хранить ссылки на их инстансы в массиве.
  • Опция allowHTML: true позволяет использовать HTML-контент, например для добавления иконок или форматирования, при этом язык текста можно менять динамически.
  • Если тултипы создаются на динамически добавляемых элементах, рекомендуется инициализировать их через делегирование (tippy.delegate) и обновлять содержимое через функцию.

Практический пример с несколькими языками

let currentLanguage = 'en';

const tooltipsContent = {
  en: "Submit",
  ru: "Отправить",
  fr: "Soumettre"
};

const buttons = document.querySelectorAll(".lang-button");

const tooltips = tippy(buttons, {
  content: (ref) => tooltipsContent[currentLanguage],
  animation: "shift-away",
  theme: "light",
  placement: "top"
});

document.querySelectorAll(".lang-switch").forEach(btn => {
  btn.addEventListener("click", () => {
    currentLanguage = btn.dataset.lang;
    tooltips.forEach(t => t.setContent(tooltipsContent[currentLanguage]));
  });
});

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

Оглавление