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

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

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

Tippy.js предоставляет компонент tippy, который можно использовать как напрямую, так и через обёртку для Vue. Важно импортировать CSS стили, чтобы тултипы отображались корректно:

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

Для простого использования в Vue 3 можно создавать тултипы внутри хуков жизненного цикла компонента:

import { onMounted, ref } from 'vue';
import tippy from 'tippy.js';

export default {
  setup() {
    const buttonRef = ref(null);

    onMounted(() => {
      tippy(buttonRef.value, {
        content: 'Пример тултипа',
        placement: 'top',
        animation: 'scale'
      });
    });

    return { buttonRef };
  }
}

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

<button ref="buttonRef">Наведи на меня</button>

Использование директивы v-tippy

Для более удобного и декларативного подхода часто применяют директиву v-tippy, которая позволяет подключать тултипы прямо в шаблоне:

import { createApp } from 'vue';
import App from './App.vue';
import { TippyPlugin } from 'tippy.js';

const app = createApp(App);

app.use(TippyPlugin, {
  directive: 'tippy',
  defaultProps: {
    placement: 'right',
    animation: 'shift-away',
    theme: 'light'
  }
});

app.mount('#app');

Применение в шаблоне:

<button v-tippy="'Пример с директивой'">Наведи на меня</button>

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

  • Не требует ручного поиска элементов через ref.
  • Легко управлять общими настройками для всех тултипов.
  • Можно передавать динамический контент и параметры через объект:
<button v-tippy="{ content: tooltipText, placement: 'bottom', delay: [100, 200] }">
  Динамический тултип
</button>

Динамический контент и реактивность

Tippy.js полностью совместим с реактивными данными Vue. Например, можно менять содержимое тултипа на лету:

import { ref, onMounted } from 'vue';
import tippy from 'tippy.js';

export default {
  setup() {
    const tooltipContent = ref('Начальное значение');
    const buttonRef = ref(null);
    let tooltipInstance = null;

    onMounted(() => {
      tooltipInstance = tippy(buttonRef.value, {
        content: tooltipContent.value
      });
    });

    const updateTooltip = () => {
      tooltipContent.value = 'Обновленное значение';
      tooltipInstance[0].setContent(tooltipContent.value);
    };

    return { buttonRef, tooltipContent, updateTooltip };
  }
}

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

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

.tippy-box[data-theme~='custom'] {
  background-color: #2c3e50;
  color: #ecf0f1;
  font-weight: bold;
  border-radius: 6px;
}

В компоненте:

tippy(buttonRef.value, {
  content: 'Кастомная тема',
  theme: 'custom',
  animation: 'fade'
});

Анимации могут быть выбраны из набора: fade, scale, shift-away, perspective. Каждую анимацию можно детально настраивать через опции duration, delay и interactive.

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

Для создания интерактивных тултипов (например, содержащих кнопки или ссылки), используется параметр interactive: true:

tippy(buttonRef.value, {
  content: '<button>Нажми меня</button>',
  allowHTML: true,
  interactive: true
});

При использовании директивы Vue:

<button v-tippy="{ content: '<a href=\"#\">Ссылка</a>', allowHTML: true, interactive: true }">
  Интерактивный тултип
</button>

Удаление и обновление тултипов

Tippy.js позволяет управлять жизненным циклом тултипов:

const instance = tippy(buttonRef.value, { content: 'Тултип' })[0];

// Обновление контента
instance.setContent('Новый контент');

// Скрытие и показ
instance.show();
instance.hide();

// Полное уничтожение
instance.destroy();

Для Vue это особенно важно при удалении элементов из DOM, чтобы избежать утечек памяти.

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

Если на странице несколько связанных тултипов, можно использовать tippy.group для синхронизации поведения:

import { group } from 'tippy.js';

const tooltips = [
  tippy('#button1', { content: 'Первый' }),
  tippy('#button2', { content: 'Второй' })
];

group(tooltips, { delay: 100 });

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

Интеграция с компонентами Vue

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

<template>
  <div ref="tippyRef">
    <slot></slot>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import tippy from 'tippy.js';

export default {
  props: {
    content: { type: String, required: true },
    placement: { type: String, default: 'top' },
    interactive: { type: Boolean, default: false }
  },
  setup(props) {
    const tippyRef = ref(null);
    let instance = null;

    onMounted(() => {
      instance = tippy(tippyRef.value, {
        content: props.content,
        placement: props.placement,
        interactive: props.interactive
      });
    });

    onBeforeUnmount(() => {
      instance.destroy();
    });

    return { tippyRef };
  }
};
</script>

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

<TippyTooltip content="Содержимое">
  <button>Наведи на меня</button>
</TippyTooltip>

Такой подход делает Tippy.js полностью компонентно-ориентированным и вписывается в архитектуру Vue-приложения.

Оглавление