Многоязычные интерфейсы

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

Подключение библиотеки

Tippy.js можно подключить несколькими способами:

Через CDN:

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

Через npm:

npm install tippy.js @popperjs/core
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

Popper.js необходим для корректного позиционирования тултипов.

Инициализация простого тултипа

tippy('#button', {
  content: 'Привет, мир!',
});

В этом примере тултип прикрепляется к элементу с id="button", а текст подсказки задается через опцию content.

Динамическое обновление содержимого

Для многоязычных интерфейсов ключевым является возможность менять текст тултипа в зависимости от текущего языка:

const translations = {
  en: 'Click me!',
  ru: 'Нажми меня!',
  es: '¡Haz clic aquí!'
};

const button = document.querySelector('#button');

const tip = tippy(button, {
  content: translations['en'],
});

function changeLanguage(lang) {
  tip.setContent(translations[lang]);
}

Метод setContent позволяет обновлять содержимое тултипа на лету, без пересоздания экземпляра.

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

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

<button id="button" 
        data-en="Click me!" 
        data-ru="Нажми меня!" 
        data-es="¡Haz clic aquí!">
  Кнопка
</button>
const button = document.querySelector('#button');
const tip = tippy(button, {
  content: button.dataset.ru
});

function switchLanguage(lang) {
  tip.setContent(button.dataset[lang]);
}

Такой подход упрощает поддержку и масштабирование интерфейса.

Интерактивные тултипы

Tippy.js поддерживает интерактивное содержимое, что полезно для элементов управления и меню:

tippy('#menu', {
  content: `
    <div>
      <button data-lang="en">English</button>
      <button data-lang="ru">Русский</button>
    </div>
  `,
  allowHTML: true,
  interactive: true,
  trigger: 'click',
});

Опция allowHTML: true разрешает использовать HTML внутри тултипа, а interactive: true позволяет взаимодействовать с элементами внутри подсказки.

Асинхронная загрузка переводов

Для крупных проектов переводы часто загружаются с сервера:

async function loadTranslation(lang) {
  const response = await fetch(`/locales/${lang}.json`);
  const data = await response.json();
  return data.tooltipText;
}

const tip = tippy('#button', {
  content: '...'
});

async function updateTooltip(lang) {
  const text = await loadTranslation(lang);
  tip.setContent(text);
}

Использование асинхронного метода позволяет интегрировать Tippy.js с системами управления переводами, например, i18next или локальными JSON-файлами.

Позиционирование и мультиязычные интерфейсы

Tippy.js поддерживает гибкое позиционирование:

tippy('#button', {
  content: 'Нажми меня!',
  placement: 'bottom-start', // bottom, top, left, right + -start, -end
  animation: 'scale',
  delay: [100, 200],
});

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

Глобальная конфигурация для многоязычия

Можно задать глобальные настройки тултипов, чтобы унифицировать стиль и поведение:

tippy.setDefaultProps({
  arrow: true,
  theme: 'light',
  duration: [200, 200],
});

Это позволяет поддерживать единый пользовательский опыт при переключении языков.

Поддержка реактивных фреймворков

В React, Vue или Svelte интеграция выглядит похожим образом, используя ref или v-bind для привязки к элементу и динамического обновления содержимого:

import tippy from 'tippy.js';
import { onMount } from 'svelte';

let button;

onMount(() => {
  tippy(button, {
    content: 'Привет!',
  });
});

Это обеспечивает совместимость Tippy.js с компонентной архитектурой и локализацией на уровне состояния приложения.

Важные рекомендации

  • Использовать allowHTML только при необходимости, чтобы избежать XSS-уязвимостей.
  • Хранить переводы в отдельных файлах или объектах для централизованного управления.
  • Предусмотреть динамическое обновление контента при смене языка, чтобы тултипы всегда соответствовали выбранной локали.
  • Следить за позиционированием при длинных переводах, особенно для языков с большим количеством символов.

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

Оглавление