Initial commit

frontend/src/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { TooltipRoot } from 'radix-vue'
+
+interface Props {
+  defaultOpen?: boolean
+  open?: boolean
+  delayDuration?: number
+  disableHoverableContent?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultOpen: false,
+  delayDuration: 200,
+  disableHoverableContent: false
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+</script>
+
+<template>
+  <TooltipRoot
+    :default-open="props.defaultOpen"
+    :open="props.open"
+    :delay-duration="props.delayDuration"
+    :disable-hoverable-content="props.disableHoverableContent"
+    @update:open="emit('update:open', $event)"
+  >
+    <slot />
+  </TooltipRoot>
+</template>

frontend/src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TooltipContent as TooltipContentPrimitive, TooltipPortal } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  sideOffset?: number
+  align?: 'start' | 'center' | 'end'
+  alignOffset?: number
+  avoidCollisions?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  side: 'top',
+  sideOffset: 4,
+  align: 'center',
+  alignOffset: 0,
+  avoidCollisions: true
+})
+
+const contentClass = computed(() =>
+  cn(
+    'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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',
+    props.class
+  )
+)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContentPrimitive
+      :class="contentClass"
+      :side="side"
+      :side-offset="sideOffset"
+      :align="align"
+      :align-offset="alignOffset"
+      :avoid-collisions="avoidCollisions"
+    >
+      <slot />
+    </TooltipContentPrimitive>
+  </TooltipPortal>
+</template>

frontend/src/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { TooltipProvider as TooltipProviderPrimitive } from 'radix-vue'
+
+interface Props {
+  delayDuration?: number
+  skipDelayDuration?: number
+  disableHoverableContent?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  delayDuration: 200,
+  skipDelayDuration: 300,
+  disableHoverableContent: false
+})
+</script>
+
+<template>
+  <TooltipProviderPrimitive
+    :delay-duration="delayDuration"
+    :skip-delay-duration="skipDelayDuration"
+    :disable-hoverable-content="disableHoverableContent"
+  >
+    <slot />
+  </TooltipProviderPrimitive>
+</template>

frontend/src/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { TooltipTrigger as TooltipTriggerPrimitive } from 'radix-vue'
+
+interface Props {
+  asChild?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  asChild: false
+})
+</script>
+
+<template>
+  <TooltipTriggerPrimitive :as-child="asChild">
+    <slot />
+  </TooltipTriggerPrimitive>
+</template>

frontend/src/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+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'