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

Для использования Tippy.js в React применяется официальная обертка @tippyjs/react. Она предоставляет компонент <Tippy> для создания тултипов без необходимости напрямую управлять DOM-элементами и жизненным циклом компонентов. Основное преимущество — реактивное управление через props и JSX.

import React from "react";
import Tippy from "@tippyjs/react";
import 'tippy.js/dist/tippy.css'; // подключение базовых стилей

function App() {
  return (
    <Tippy content="Привет, мир!">
      <button>Наведи на меня</button>
    </Tippy>
  );
}

В этом примере content задает текст тултипа, а дочерний элемент (<button>) является триггером. Tippy автоматически добавляет обработчики событий для отображения тултипа при наведении.

Props компонента <Tippy>

  • content – основной текст или JSX содержимое тултипа.
  • placement – положение тултипа относительно элемента: "top", "bottom", "left", "right" и их варианты с -start и -end.
  • trigger – событие, вызывающее тултип: "mouseenter focus", "click", "manual" и др.
  • interactive – если true, тултип реагирует на взаимодействие пользователя (например, клик внутри тултипа).
  • visible – управление видимостью тултипа программно.
  • animation – задает эффект появления: "fade", "scale", "shift-away" и другие.
  • delay – задержка появления и скрытия в миллисекундах, может быть массивом [show, hide].
  • theme – возможность задать кастомную тему, совместимую с CSS.

Пример с кастомизацией и анимацией:

<Tippy
  content={<span>Сложное содержимое</span>}
  placement="right"
  animation="scale"
  delay={[100, 200]}
  theme="light"
>
  <button>Кликни меня</button>
</Tippy>

Контроль состояния тултипов

Для динамического управления используется реф. В React можно получать доступ к экземпляру Tippy и программно управлять его поведением:

import React, { useRef } from "react";
import Tippy from "@tippyjs/react";

function ControlledTooltip() {
  const tippyRef = useRef();

  return (
    <div>
      <Tippy
        content="Управляемый тултип"
        visible={false}
        onCre ate={instance => tippyRef.current = instance}
      >
        <button>Наведи или кликни</button>
      </Tippy>
      <button onCl ick={() => tippyRef.current.show()}>Показать тултип</button>
      <button onCl ick={() => tippyRef.current.hide()}>Скрыть тултип</button>
    </div>
  );
}

Использование onCreate позволяет сохранить ссылку на Tippy-экземпляр и управлять методами show(), hide(), hide() с задержкой или кастомными эффектами.

Работа с JSX в тултипах

Tippy.js поддерживает сложные JSX-компоненты внутри content, что позволяет создавать интерактивные тултипы:

<Tippy
  content={
    <div style={{ padding: '10px', maxWidth: '200px' }}>
      <strong>Заголовок</strong>
      <p>Подробное описание тултипа с HTML и стилями.</p>
      <button onCl ick={() => alert("Кнопка нажата")}>Нажми</button>
    </div>
  }
  interactive={true}
  placement="bottom"
>
  <button>Сложный тултип</button>
</Tippy>

Параметр interactive={true} предотвращает мгновенное скрытие тултипа при наведении мыши на его содержимое.

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

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

import React, { useState } from "react";
import Tippy from "@tippyjs/react";

function DynamicTooltip() {
  const [count, setCount] = useState(0);

  return (
    <Tippy content={`Кликнули ${count} раз`}>
      <button onCl ick={() => setCount(count + 1)}>Нажми меня</button>
    </Tippy>
  );
}

Tippy автоматически обновляет тултип при изменении props, что делает его идеальным для реактивного интерфейса.

Кастомизация через CSS и темы

Tippy.js позволяет создавать собственные темы с помощью CSS переменных:

.tippy-box[data-theme~='custom'] {
  background-color: #333;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px 12px;
}

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

<Tippy content="Тема кастом" theme="custom">
  <button>Тултип с кастомной темой</button>
</Tippy>

Можно комбинировать темы и анимации для создания уникального визуального стиля интерфейса.

Использование хуков для упрощения

useTippy позволяет управлять тултипами вне JSX, что удобно для динамически создаваемых элементов:

import { useTippy } from "@tippyjs/react";

function HookTooltip() {
  const [tippy, setReference] = useTippy({ content: "Хук тултип" });

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

Этот подход эффективен при работе с библиотеками управления DOM, когда компонент не рендерит <Tippy> напрямую.

Поддержка Popper.js и расширенные опции

Tippy.js основан на Popper.js, поэтому можно использовать все его возможности: смещения, сдвиги, коллизии, ограничение области отображения. Пример с настройкой popperOptions:

<Tippy
  content="Сдвинутый тултип"
  popperOptions={{
    modifiers: [
      { name: 'offset', options: { offset: [0, 20] } },
      { name: 'preventOverflow', options: { boundary: 'viewport' } }
    ]
  }}
>
  <button>Попробуй смещение</button>
</Tippy>

Использование Popper.js модификаторов позволяет точно контролировать позиционирование и поведение тултипа в сложных интерфейсах.

Lazy loading и производительность

Tippy.js поддерживает ленивое создание тултипов с помощью lazy и render:

<Tippy
  render={attrs => (
    <div {...attrs} style={{ padding: '5px', backgroundColor: '#555', color: '#fff' }}>
      Ленивый контент
    </div>
  )}
  lazy={true}
>
  <button>Ленивая загрузка</button>
</Tippy>

Это уменьшает нагрузку на DOM при большом количестве элементов с тултипами, создавая их только при необходимости.

Оглавление