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

Tooltipster — это современная библиотека для создания красивых и кастомизируемых всплывающих подсказок. Для интеграции с Vue необходимо установить саму библиотеку и её стили через npm или yarn:

npm install tooltipster jquery

После установки в main.js подключаются стили и скрипты:

import 'tooltipster/dist/css/tooltipster.bundle.min.css';
import $ from 'jquery';
import 'tooltipster';

Важно помнить, что Tooltipster зависит от jQuery, поэтому его необходимо импортировать в проект до самой библиотеки.

Инициализация Tooltipster в компонентах Vue

Для работы с Vue оптимально использовать хуки жизненного цикла компонента. Инициализация выполняется в mounted(), чтобы гарантировать наличие DOM-элементов:

export default {
  mounted() {
    $(this.$refs.tooltip).tooltipster({
      content: 'Пример подсказки',
      theme: 'tooltipster-light',
      delay: 200,
      interactive: true
    });
  }
}

В шаблоне создается элемент с ref:

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

Использование ref позволяет получить доступ к конкретному DOM-элементу и инициализировать на нем Tooltipster без конфликтов с другими элементами.

Основные параметры конфигурации

Tooltipster предоставляет обширный набор опций, среди которых:

  • content — текст или HTML, который будет отображаться в подсказке. Можно использовать Vue-компоненты через рендеринг HTML.
  • theme — визуальная тема подсказки. В библиотеке поставляются стандартные темы, но возможна кастомизация через CSS.
  • delay — задержка появления в миллисекундах.
  • interactive — делает подсказку интерактивной, позволяя пользователю кликать по ссылкам или кнопкам внутри неё.
  • trigger — событие, которое вызывает подсказку (hover, click, custom).
  • maxWidth — максимальная ширина подсказки.
  • animation — тип анимации (fade, grow, swing и др.).

Пример с расширенной конфигурацией:

$(this.$refs.tooltip).tooltipster({
  content: $('<span>Подсказка с <b>HTML</b></span>'),
  theme: 'tooltipster-punk',
  delay: 300,
  interactive: true,
  trigger: 'click',
  maxWidth: 250,
  animation: 'grow'
});

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

В Vue часто возникает необходимость менять текст подсказки динамически. Tooltipster предоставляет метод content для обновления:

this.tooltipInstance = $(this.$refs.tooltip).tooltipster({
  content: 'Начальный текст',
  theme: 'tooltipster-light'
});

this.tooltipInstance.tooltipster('content', 'Новый текст подсказки');

Можно привязать содержимое подсказки к реактивному свойству Vue:

data() {
  return {
    tooltipText: 'Исходный текст'
  }
},
mounted() {
  this.tooltipInstance = $(this.$refs.tooltip).tooltipster({
    content: this.tooltipText
  });
},
watch: {
  tooltipText(newVal) {
    this.tooltipInstance.tooltipster('content', newVal);
  }
}

Использование Vue-компонентов внутри Tooltipster

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

import MyTooltipComponent from './MyTooltipComponent.vue';
import { createApp } from 'vue';

mounted() {
  const container = document.createElement('div');
  createApp(MyTooltipComponent).mount(container);

  $(this.$refs.tooltip).tooltipster({
    content: container,
    interactive: true
  });
}

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

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

Tooltipster предоставляет методы для управления подсказкой:

  • open() — открыть подсказку вручную.
  • close() — закрыть подсказку.
  • destroy() — полностью удалить подсказку и освободить память.

Пример интеграции с методами компонента Vue:

methods: {
  showTooltip() {
    this.tooltipInstance.tooltipster('open');
  },
  hideTooltip() {
    this.tooltipInstance.tooltipster('close');
  }
}

События Tooltipster можно обрабатывать через опцию functionReady, functionBefore, functionAfter:

$(this.$refs.tooltip).tooltipster({
  functionReady: function(instance, helper) {
    console.log('Подсказка готова к показу');
  }
});

Совместимость с реактивным DOM

При работе с динамическими списками (например, через v-for) важно инициализировать Tooltipster после рендера элементов. Для этого используется $nextTick:

this.$nextTick(() => {
  this.items.forEach(item => {
    $(item.ref).tooltipster({ content: item.text });
  });
});

Это гарантирует корректное связывание Tooltipster с DOM-элементами после всех изменений Vue.

Кастомизация стилей и тем

Tooltipster позволяет создавать собственные темы через CSS. Минимальная структура темы:

.tooltipster-mytheme {
  background: #333;
  color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
}

.tooltipster-mytheme .tooltipster-arrow {
  border-top-color: #333;
}

Подключение темы через опцию theme:

$(this.$refs.tooltip).tooltipster({
  theme: 'tooltipster-mytheme'
});

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

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

Оглавление