Dialog

Описание

Tooltips отображают краткие надписи или сообщения.

Подробнее об использовании элемента читайте на официальном сайте

Plain Tooltip

Наведи чтобы увидеть подсказку

Rich Tooltip

Компоненты

Оба компонента можно сохранить в src/shared/ui/PlainTooltip.tsx и в src/shared/ui/RichTooltip.tsx соответственно.

Обратите внимание на необходимые зависимости для компонента PlainTooltip: Body

Для компонента RichTooltip уже понадобятся: Body и Title

Оба компонента используют @radix-ui/react-tooltip компонент.

yarn add @radix-ui/react-tooltip

"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

import Body from "@/shared/typography/Body"

import { cn } from "@/lib/cn"

interface PlainTooltipProps
  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
  content: string
  triggerAsChild?: boolean
}

const PlainTooltip = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  PlainTooltipProps
>(
  (
    {
      children,
      content,
      triggerAsChild = true,
      className,
      sideOffset = 4,
      ...props
    },
    forwardedRef
  ) => (
    <TooltipPrimitive.Provider delayDuration={500}>
      <TooltipPrimitive.Root>
        <TooltipPrimitive.Trigger asChild={triggerAsChild}>
          {children}
        </TooltipPrimitive.Trigger>
        <TooltipPrimitive.Content
          className={cn(
            "flex items-center rounded min-h-[24px] bg-inverseSurface px-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
            className
          )}
          sideOffset={sideOffset}
          ref={forwardedRef}
          {...props}
        >
          <Body size="small" className="text-inverseOnSurface">
            {content}
          </Body>
        </TooltipPrimitive.Content>
      </TooltipPrimitive.Root>
    </TooltipPrimitive.Provider>
  )
)
PlainTooltip.displayName = "PlainTooltip"

export default PlainTooltip

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

Ниже - код для примера в начале страницы.


// Tooltip для кнопок
<PlainTooltip content="Это обычный tooltip">
  <Button appearance="tonal">Показать tooltip</Button>
</PlainTooltip>
<PlainTooltip content="Скопировать">
  <IconButton appearance="tonal" icon={<Copy />} />
</PlainTooltip>
...
// Tooltip для текста
<p> Наведи {" "}
  <PlainTooltip
    content="Отступ для текста - 8px, вместо 4px для кнопок"
    sideOffset={8}
    triggerAsChild={false}
  >
    <span className="font-medium">сюда</span>
  </PlainTooltip>{" "}
  чтобы увидеть подсказку
</p>