Tooltip

import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipPopup,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export default function Particle() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="outline" />}>
        Наведите курсор
      </TooltipTrigger>
      <TooltipPopup>Полезная подсказка</TooltipPopup>
    </Tooltip>
  );
}

Установка

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @oracul/tooltip
Копировать

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

Copyimport {
  Tooltip,
  TooltipCreateHandle,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

Copy<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Наведите курсор
  </TooltipTrigger>
  <TooltipPopup>Полезная подсказка</TooltipPopup>
</Tooltip>

API

Tooltip

Корневой компонент. Псевдоним для Tooltip.Root из Base UI.

TooltipTrigger

Элемент-триггер, показывающий подсказку при наведении или фокусе. Псевдоним для Tooltip.Trigger из Base UI.

TooltipPopup

Контейнер всплывающего окна, отображающий содержимое подсказки. Также экспортируется как TooltipContent.

TooltipProvider

Провайдер для группировки подсказок. Псевдоним для Tooltip.Provider из Base UI.

TooltipCreateHandle

Создаёт хэндл для отделённых триггеров подсказок. Возвращает объект-хэндл, который можно привязать к нескольким триггерам для анимированных переходов.

Примеры

Сгруппированные подсказки

Чтобы сгруппировать несколько подсказок так, чтобы они появлялись мгновенно после открытия первой, оберните их в TooltipProvider. Логика группировки гарантирует, что как только одна подсказка становится видимой, соседние подсказки будут показаны мгновенно.

Анимированные подсказки

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

Чтобы создать отделённые триггеры:

1. Создайте хэндл с помощью TooltipCreateHandle
2. Привяжите один и тот же хэндл к нескольким компонентам TooltipTrigger
3. Каждый триггер передаёт свойство payload, содержащее компонент содержимого
4. Используйте один компонент Tooltip с хэндлом для отрисовки всплывающего окна