Tooltip

<script setup lang="ts">
import { TooltipRoot } from "reka-ui"
</script>

<template>
  <TooltipRoot data-slot="tooltip">
    <slot />
  </TooltipRoot>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { TooltipArrow, TooltipContent, TooltipPortal } from "reka-ui"
import { cn } from "@/lib/utils"

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes["class"]
    sideOffset?: number
  }>(),
  {
    sideOffset: 0,
  }
)
</script>

<template>
  <TooltipPortal>
    <TooltipContent
      data-slot="tooltip-content"
      :side-offset="props.sideOffset"
      :class="
        cn(
          'cn-tooltip-content z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) bg-foreground text-background',
          props.class
        )
      "
    >
      <slot />
      <TooltipArrow class="cn-tooltip-arrow z-50 translate-y-[calc(-50%_-_2px)] bg-foreground fill-foreground" />
    </TooltipContent>
  </TooltipPortal>
</template>

<script setup lang="ts">
/**
 * Порт базового радикс-слоя (registry/bases/radix/ui/tooltip.tsx, MIT).
 * Radix TooltipPrimitive -> reka-ui Tooltip*, один в один. Позиционирующая
 * CSS-переменная Radix (`--radix-tooltip-content-transform-origin`)
 * оставлена буквально как в оригинале (правило 1); см. docs/PORTING.md.
 */
import { TooltipProvider } from "reka-ui"

const props = withDefaults(
  defineProps<{
    delayDuration?: number
  }>(),
  {
    delayDuration: 0,
  }
)
</script>

<template>
  <TooltipProvider data-slot="tooltip-provider" :delay-duration="props.delayDuration">
    <slot />
  </TooltipProvider>
</template>

<script setup lang="ts">
import { TooltipTrigger } from "reka-ui"
</script>

<template>
  <TooltipTrigger data-slot="tooltip-trigger">
    <slot />
  </TooltipTrigger>
</template>

export { default as Tooltip } from "./Tooltip.vue"
export { default as TooltipContent } from "./TooltipContent.vue"
export { default as TooltipProvider } from "./TooltipProvider.vue"
export { default as TooltipTrigger } from "./TooltipTrigger.vue"