Реактивность и обновления

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

Основы реактивности

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

const button = document.querySelector('#myButton');
const tip = tippy(button, {
  content: 'Первоначальный текст',
});

tip.setContent('Новый текст'); // обновление содержимого тултипа

Важно: setContent работает независимо от того, открыт тултип или нет. Если тултип открыт в момент обновления, изменения будут отображены мгновенно.

Реактивные данные и привязка к состоянию

Tippy.js не включает собственную систему реактивности, но легко интегрируется с любыми реактивными библиотеками (например, Vue.js, React, Svelte). Основная идея — отслеживать изменение данных и вызывать методы экземпляра для обновления тултипа.

Пример с использованием Vue.js:

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

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

export default {
  setup() {
    const tooltipText = ref('Изначальный текст');
    let tipInstance;

    onMounted(() => {
      tipInstance = tippy(document.querySelector('button'), {
        content: tooltipText.value,
      });
    });

    watch(tooltipText, (newValue) => {
      tipInstance.setContent(newValue);
    });

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

В этом примере изменение tooltipText автоматически обновляет тултип благодаря методу setContent.

Автоматическое обновление при изменении DOM

Tippy.js поддерживает опцию allowHTML, которая позволяет вставлять HTML-контент внутрь тултипа. Если содержимое тултипа динамически меняется через JavaScript, необходимо вызывать popperInstance.update() для корректного пересчета позиции тултипа:

tip.setContent('<strong>Новый HTML</strong>');
tip.popperInstance.update(); // пересчет позиции

Метод update() обеспечивает, что тултип всегда располагается корректно относительно цели, независимо от изменений размеров или положения элемента.

Динамическое управление параметрами

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

tip.setProps({
  placement: 'bottom',
  theme: 'light',
});

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

Примеры сложной реактивности

1. Реакция на пользовательский ввод

const input = document.querySelector('#name');
const tip = tippy(input, {
  content: 'Введите ваше имя',
  trigger: 'focus',
});

input.addEventListener('input', (e) => {
  tip.setContent(`Привет, ${e.target.value || 'пользователь'}!`);
});

Тултип обновляется в реальном времени по мере ввода текста.

2. Реакция на асинхронные данные

const tip = tippy('#dataBtn', {
  content: 'Загрузка...',
});

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    tip.setContent(`Данные: ${data.value}`);
  });

Tippy.js позволяет безопасно обновлять контент после завершения асинхронной операции.

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

  • Не пересоздавать тултип на каждый апдейт. Использовать setContent и setProps эффективнее.
  • Вызывать update() при изменении размера или HTML-контента, чтобы тултип оставался корректно позиционированным.
  • Следить за производительностью при больших списках элементов с тултипами. Создание экземпляров лениво, только при необходимости.

Заключение по реактивности

Реактивность в Tippy.js строится на сочетании динамического обновления контента, изменения свойств и пересчета позиции. Метод setContent является центральным инструментом для обновлений, а setProps и popperInstance.update() обеспечивают гибкость и точность. Такая архитектура позволяет интегрировать Tippy.js с любыми фреймворками и создавать интерактивные интерфейсы с динамическими тултипами.

Оглавление