kimi-changes

public/src/components/ui/Tooltip.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true
+  },
+  position: {
+    type: String,
+    default: 'top',
+    validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value)
+  }
+})
+
+const show = ref(false)
+
+const positionClasses = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ml-2'
+}
+
+const arrowClasses = {
+  top: 'top-full left-1/2 -translate-x-1/2 -mt-1 border-l-transparent border-r-transparent border-b-transparent',
+  bottom: 'bottom-full left-1/2 -translate-x-1/2 -mb-1 border-l-transparent border-r-transparent border-t-transparent',
+  left: 'left-full top-1/2 -translate-y-1/2 -ml-1 border-t-transparent border-b-transparent border-r-transparent',
+  right: 'right-full top-1/2 -translate-y-1/2 -mr-1 border-t-transparent border-b-transparent border-l-transparent'
+}
+</script>
+
+<template>
+  <div 
+    class="relative inline-block"
+    @mouseenter="show = true"
+    @mouseleave="show = false"
+    @focus="show = true"
+    @blur="show = false"
+  >
+    <slot></slot>
+    
+    <transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div
+        v-if="show"
+        :class="[
+          'absolute z-50 px-3 py-2 text-sm font-medium text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg whitespace-nowrap pointer-events-none',
+          positionClasses[position]
+        ]"
+        role="tooltip"
+      >
+        {{ text }}
+        <div 
+          :class="[
+            'absolute w-2 h-2 bg-gray-900 dark:bg-gray-700 rotate-45 border-4 border-gray-900 dark:border-gray-700',
+            arrowClasses[position]
+          ]"
+        ></div>
+      </div>
+    </transition>
+  </div>
+</template>