21 lines
1022 B
Vue
21 lines
1022 B
Vue
<template>
|
|
<HoverCardRoot :open-delay="delay">
|
|
<HoverCardTrigger class="inline-block cursor-help outline-none" asChild>
|
|
<slot></slot>
|
|
</HoverCardTrigger>
|
|
<HoverCardPortal :disabled="disabled">
|
|
<HoverCardContent :side="side" class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
|
|
<slot name="content"></slot>
|
|
<HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
|
|
</HoverCardContent>
|
|
</HoverCardPortal>
|
|
</HoverCardRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { delay = 500, disabled = false, side = 'bottom' } = defineProps<{
|
|
delay?: number
|
|
disabled?: boolean
|
|
side?: 'top' | 'right' | 'bottom' | 'left'
|
|
}>();
|
|
</script> |