mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2026-07-30 20:11:45 +08:00
40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@/components/ui/tooltip'
|
|
import { HelpCircle } from 'lucide-vue-next'
|
|
|
|
defineProps<{
|
|
content: string
|
|
side?: 'top' | 'right' | 'bottom' | 'left'
|
|
align?: 'start' | 'center' | 'end'
|
|
iconSize?: 'sm' | 'md'
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<TooltipProvider :delay-duration="200">
|
|
<Tooltip>
|
|
<TooltipTrigger as-child>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center text-muted-foreground/60 hover:text-muted-foreground transition-colors focus:outline-none"
|
|
:class="iconSize === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'"
|
|
>
|
|
<HelpCircle :class="iconSize === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent
|
|
:side="side || 'top'"
|
|
:align="align || 'center'"
|
|
class="max-w-[280px] text-xs leading-relaxed"
|
|
>
|
|
<p>{{ content }}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</template>
|