Moved tooltip to a reusable component
This commit is contained in:
20
ui/src/components/tooltip/Tooltip.vue
Normal file
20
ui/src/components/tooltip/Tooltip.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
open: boolean,
|
||||
message: string
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative inline-flex items-center group">
|
||||
<slot></slot>
|
||||
<div v-if="open" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
|
||||
whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
|
||||
text-popover-foreground shadow-md border border-border
|
||||
opacity-0 translate-y-1
|
||||
group-hover:opacity-100 group-hover:translate-y-0
|
||||
transition-opacity transition-transform duration-150">
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user