Add HoverCard

components/HoverCard.vue

@@ -0,0 +1,21 @@
+<template>
+    <HoverCardRoot :open-delay="delay">
+        <HoverCardTrigger class="inline-block cursor-help outline-none" asChild>
+            <slot></slot>
+        </HoverCardTrigger>
+        <HoverCardPortal :disabled="disabled">
+            <HoverCardContent :side="side" class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
+                <slot name="content"></slot>
+                <HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
+            </HoverCardContent>
+        </HoverCardPortal>
+    </HoverCardRoot>
+</template>
+
+<script setup lang="ts">
+const { delay = 500, disabled = false, side = 'bottom' } = defineProps<{
+    delay?: number
+    disabled?: boolean
+    side?: 'top' | 'right' | 'bottom' | 'left'
+}>();
+</script>

components/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-    <TooltipRoot :delay-duration="delay">
+    <TooltipRoot :delay-duration="delay" :disabled="disabled">
         <TooltipTrigger asChild>
             <span tabindex="0"><slot></slot></span>
         </TooltipTrigger>
@@ -15,7 +15,8 @@
 <script setup lang="ts">
 const { message, delay = 300, side } = defineProps<{
     message: string
-    delay?: number
+    delay?: number,
+    disabled?: boolean
     side?: 'left' | 'right' | 'top' | 'bottom'
 }>();
 </script>