1

src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TooltipContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TooltipArrow, TooltipContent as RekaTooltipContent, TooltipPortal } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 6
+  }
+)
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <TooltipPortal>
+    <RekaTooltipContent
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'z-[90] rounded-md border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md',
+          props.class
+        )
+      "
+    >
+      <slot />
+      <TooltipArrow class="fill-popover" />
+    </RekaTooltipContent>
+  </TooltipPortal>
+</template>