Интеграция с Svelte

Для работы с Tippy.js в Svelte необходимо сначала установить библиотеку через npm или yarn:

npm install tippy.js
# или
yarn add tippy.js

После установки подключается CSS стилизация подсказок, иначе тултипы будут работать, но выглядеть некорректно:

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

Для использования Tippy.js в Svelte потребуется импортировать саму библиотеку:

import tippy from 'tippy.js';

Создание базового тултипа в компоненте Svelte

В Svelte привязка к DOM-элементу осуществляется через референс. Для этого используется директива bind:this.

<script>
  import tippy from 'tippy.js';
  let buttonElement;

  // Инициализация тултипа после монтирования компонента
  import { onMount } from 'svelte';
  onMount(() => {
    tippy(buttonElement, {
      content: 'Привет, это тултип!',
      placement: 'top',
    });
  });
</script>

<button bind:this={buttonElement}>
  Наведи на меня
</button>

Ключевой момент: Tippy.js требует доступа к реальному DOM-элементу, поэтому инициализация проводится внутри onMount.

Использование Svelte Actions для интеграции

Более элегантный способ — создание Svelte Action, которая автоматически привязывает тултипы к элементам:

<script>
  import tippy from 'tippy.js';
  import 'tippy.js/dist/tippy.css';

  export function tooltip(node, params) {
    const instance = tippy(node, params);

    return {
      update(newParams) {
        instance.setProps(newParams);
      },
      destroy() {
        instance.destroy();
      }
    };
  }
</script>

<button use:tooltip={{ content: 'Динамический тултип', placement: 'right' }}>
  Наведи на меня
</button>

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

  • Автоматическое удаление тултипа при уничтожении элемента.
  • Легкое обновление параметров через реактивные данные Svelte.
  • Универсальность: можно применять к любым DOM-узлам.

Динамическое обновление контента

Tippy.js позволяет изменять содержимое тултипа на лету с помощью метода setContent. В Svelte это удобно интегрировать через реактивные переменные:

<script>
  import tippy from 'tippy.js';
  import { onMount } from 'svelte';

  let button;
  let tooltipText = 'Первый текст';

  onMount(() => {
    const tip = tippy(button, { content: tooltipText });
    $: tip.setContent(tooltipText);
  });

  function changeText() {
    tooltipText = 'Обновленный текст';
  }
</script>

<button bind:this={button} on:click={changeText}>
  Наведи и кликни
</button>

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

  • Использование реактивного блока $: обеспечивает автоматическое обновление тултипа при изменении переменной.
  • Такой подход полностью соответствует реактивной модели Svelte.

Управление событиями тултипа

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

<script>
  import tippy from 'tippy.js';
  import { onMount } from 'svelte';

  let button;

  onMount(() => {
    const tip = tippy(button, { content: 'События Tippy.js' });

    tip[0].popper.addEventListener('mouseenter', () => console.log('Навел мышь'));
    tip[0].popper.addEventListener('mouseleave', () => console.log('Убрал мышь'));
  });
</script>

<button bind:this={button}>События тултипа</button>

Важно: Tippy.js возвращает массив экземпляров для каждой привязанной ноды. В данном случае — один экземпляр, поэтому доступ через tip[0].

Группировка тултипов

Для синхронного управления несколькими тултипами удобно использовать Tippy.js Group:

<script>
  import tippy, { createSingleton } from 'tippy.js';
  import 'tippy.js/dist/tippy.css';
  import { onMount } from 'svelte';

  let button1, button2;

  onMount(() => {
    const tips = [tippy(button1, { content: 'Тултип 1' }), tippy(button2, { content: 'Тултип 2' })];
    createSingleton(tips, { delay: 200 });
  });
</script>

<button bind:this={button1}>Кнопка 1</button>
<button bind:this={button2}>Кнопка 2</button>

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

  • createSingleton объединяет несколько тултипов в один экземпляр.
  • Полезно для списков и таблиц, где требуется одинаковое поведение тултипов.

Настройка анимаций и тем

Tippy.js поддерживает кастомные темы и анимации:

<script>
  import tippy from 'tippy.js';
  import 'tippy.js/dist/tippy.css';
  import { onMount } from 'svelte';

  let button;

  onMount(() => {
    tippy(button, {
      content: 'Тултип с анимацией',
      theme: 'light-border',
      animation: 'scale',
      duration: [300, 250], // [появление, скрытие]
    });
  });
</script>

<button bind:this={button}>Анимация и тема</button>

Параметры анимации и темы:

  • theme: можно подключить собственный CSS-класс.
  • animation: значения fade, scale, shift-away, shift-toward, perspective.
  • duration: массив из двух чисел — продолжительность появления и скрытия.

Интеграция с реактивными данными

В Svelte удобно использовать реактивные данные для управления состоянием тултипов:

<script>
  import tippy from 'tippy.js';
  import 'tippy.js/dist/tippy.css';
  import { onMount } from 'svelte';

  let button;
  let visible = false;

  let tip;
  onMount(() => {
    tip = tippy(button, { content: 'Реактивный тултип', trigger: 'manual' });
  });

  $: visible ? tip.show() : tip.hide();
</script>

<button bind:this={button} on:click={() => visible = !visible}>
  Переключить тултип
</button>

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

  • Полный контроль над отображением через переменные.
  • Возможность сочетать с анимациями, асинхронными событиями или API-запросами.

Вывод

Такой подход позволяет создавать в Svelte полностью управляемые, динамические и стильные тултипы с Tippy.js. Использование Svelte Actions, реактивных переменных и встроенных событий делает интеграцию максимально удобной и поддерживаемой.

Оглавление