mirror of
https://github.com/lukaszraczylo/beat-delivery-methodology.git
synced 2026-10-20 06:37:48 +00:00
70 lines
2.1 KiB
Vue
70 lines
2.1 KiB
Vue
<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>
|