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

Для использования Tooltipster в проекте на React требуется подключение библиотеки через npm или yarn:

npm install tooltipster
# или
yarn add tooltipster

Необходимо также подключить CSS для корректного отображения тултипов:

import 'tooltipster/dist/css/tooltipster.bundle.min.css';
import 'tooltipster/dist/js/tooltipster.bundle.min.js';

Tooltipster не предоставляет нативный React-компонент, поэтому его интеграция выполняется через работу с DOM-элементами и useEffect.

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

Чтобы привязать тултип к элементу, используется реф:

import React, { useRef, useEffect } from 'react';
import $ from 'jquery';
import 'tooltipster/dist/css/tooltipster.bundle.min.css';
import 'tooltipster/dist/js/tooltipster.bundle.min.js';

const TooltipButton = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const $el = $(buttonRef.current);
    $el.tooltipster({
      content: 'Пример Tooltipster',
      theme: 'tooltipster-light',
      animation: 'fade',
      delay: 200,
      trigger: 'hover'
    });

    return () => {
      $el.tooltipster('destroy');
    };
  }, []);

  return <button ref={buttonRef}>Наведи на меня</button>;
};

Ключевые моменты:

  • Используется useRef для получения доступа к DOM-элементу.
  • Инициализация выполняется в useEffect, чтобы гарантировать, что элемент существует в DOM.
  • destroy в функции очистки предотвращает утечки памяти при размонтировании компонента.

Настройка контента тултипа

Tooltipster позволяет использовать как текстовый, так и HTML-контент:

$el.tooltipster({
  content: $('<span><strong>Важная информация:</strong> подробности здесь</span>'),
  contentAsHTML: true
});

Опция contentAsHTML: true позволяет рендерить HTML внутри тултипа. Это важно при сложной разметке или использовании JSX-элементов.

Для динамического контента можно использовать колбэк:

$el.tooltipster({
  functionBefore: function(instance, helper) {
    instance.content(`Текущее время: ${new Date().toLocaleTimeString()}`);
  }
});

functionBefore вызывается перед показом тултипа и позволяет обновлять его содержимое.

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

Tooltipster поддерживает различные триггеры:

  • hover — стандартный показ при наведении.
  • click — открытие по клику.
  • custom — полное управление через методы API.

Пример с кликом:

$el.tooltipster({
  trigger: 'click',
  interactive: true
});

Для реактивного взаимодействия можно использовать методы API:

$el.tooltipster('open');    // открыть тултип
$el.tooltipster('close');   // закрыть тултип
$el.tooltipster('toggle');  // переключение состояния

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

Для тултипов с элементами управления или формами необходимо установить interactive: true. Это предотвращает закрытие тултипа при наведении на его содержимое:

$el.tooltipster({
  content: $('<div><input type="text" placeholder="Ваше имя"/></div>'),
  interactive: true,
  trigger: 'click'
});

Темизация и стили

Tooltipster поставляется с несколькими встроенными темами (tooltipster-default, tooltipster-light, tooltipster-noir), которые подключаются через CSS. Дополнительно можно создавать свои темы:

.my-tooltip-theme {
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  padding: 10px;
}
$el.tooltipster({
  theme: 'my-tooltip-theme'
});

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

Для множества элементов удобно инициализировать Tooltipster через селектор jQuery:

useEffect(() => {
  const $buttons = $('.tooltip-button');
  $buttons.tooltipster({
    content: 'Общий тултип',
    animation: 'grow',
    delay: 150
  });

  return () => {
    $buttons.tooltipster('destroy');
  };
}, []);

В React это чаще всего используется при работе с массивами элементов через map.

Использование Tooltipster с компонентами динамически

Если элементы создаются динамически, важно инициализировать тултип после рендера:

const DynamicList = ({ items }) => {
  useEffect(() => {
    $('.dynamic-item').tooltipster({
      content: 'Динамический тултип',
      animation: 'fade'
    });

    return () => {
      $('.dynamic-item').tooltipster('destroy');
    };
  }, [items]);

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index} className="dynamic-item">{item}</li>
      ))}
    </ul>
  );
};

Опция зависимости [items] в useEffect обеспечивает повторную инициализацию при изменении списка элементов.

Работа с асинхронным контентом

Tooltipster позволяет загружать данные через AJAX или асинхронные функции:

$el.tooltipster({
  content: 'Загрузка...',
  functionBefore: function(instance, helper) {
    fetch('/api/info')
      .then(res => res.text())
      .then(data => {
        instance.content(data);
      });
  }
});

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

Ключевые советы при использовании в React

  1. Всегда использовать useRef для доступа к DOM.
  2. Инициализировать Tooltipster в useEffect после рендера.
  3. Обязательно вызывать destroy при размонтировании компонента.
  4. Для динамических списков использовать селекторы и зависимость [items].
  5. Использовать interactive: true для тултипов с формами или кнопками.
  6. HTML-контент требует contentAsHTML: true.
  7. Для асинхронного контента применять functionBefore или обновление через API.

Эти практики обеспечивают корректную интеграцию Tooltipster в современное React-приложение, минимизируют конфликты с виртуальным DOM и предотвращают утечки памяти.

Оглавление