84 lines
1.8 KiB
Vue
84 lines
1.8 KiB
Vue
<template>
|
|
<TooltipRoot :delay-duration="delay" :disabled="disabled">
|
|
<TooltipTrigger asChild>
|
|
<span tabindex="0"><slot></slot></span>
|
|
</TooltipTrigger>
|
|
<TooltipPortal>
|
|
<TooltipContent class="TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50" :side="side" :side-offset="['left', 'right'].includes(side ?? '') ? 8 : 0">
|
|
{{ message }}
|
|
<TooltipArrow class="fill-light-30 dark:fill-dark-30"></TooltipArrow>
|
|
</TooltipContent>
|
|
</TooltipPortal>
|
|
</TooltipRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { message, delay = 300, side } = defineProps<{
|
|
message: string
|
|
delay?: number,
|
|
disabled?: boolean
|
|
side?: 'left' | 'right' | 'top' | 'bottom'
|
|
}>();
|
|
</script>
|
|
|
|
<style>
|
|
.TooltipContent {
|
|
animation-duration: .3s;
|
|
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
.TooltipContent[data-side="top"] {
|
|
animation-name: slideUp;
|
|
}
|
|
.TooltipContent[data-side="bottom"] {
|
|
animation-name: slideDown;
|
|
}
|
|
.TooltipContent[data-side="left"] {
|
|
animation-name: slideLeft;
|
|
}
|
|
.TooltipContent[data-side="right"] {
|
|
animation-name: slideRight;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes slideRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
</style> |