mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-20 06:55:06 -04:00
28 lines
764 B
Vue
28 lines
764 B
Vue
|
<script setup lang="ts">
|
||
|
|
const props = withDefaults(defineProps<{ tooltip?: string }>(), { tooltip: '' });
|
||
|
|
const { tooltip } = toRefs(props);
|
||
|
|
|
||
|
|
const targetRef = ref();
|
||
|
|
const isTargetHovered = useElementHover(targetRef);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="relative" inline-block>
|
||
|
|
<div ref="targetRef">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="absolute bottom-100% left-50% z-10 mb-5px whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s -translate-x-1/2"
|
||
|
|
:class="{
|
||
|
|
'op-0 scale-0': isTargetHovered === false,
|
||
|
|
'op-100 scale-100': isTargetHovered,
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<slot name="tooltip">
|
||
|
|
{{ tooltip }}
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|