Bernd Storath
30 lines
910 B
Vue
30 lines
910 B
Vue
<template>
|
|
<TooltipProvider>
|
|
<TooltipRoot :open="open" @update:open="open = $event">
|
|
<TooltipTrigger
|
|
class="mx-2 inline-flex h-4 w-4 items-center justify-center rounded-full text-gray-400 outline-none focus:shadow-sm focus:shadow-black"
|
|
as-child
|
|
>
|
|
<button type="button" @click="open = !open">
|
|
<slot />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipPortal>
|
|
<TooltipContent
|
|
class="select-none whitespace-pre-line rounded bg-gray-600 px-3 py-2 text-sm leading-none text-white shadow-lg will-change-[transform,opacity]"
|
|
:side-offset="5"
|
|
>
|
|
{{ text }}
|
|
<TooltipArrow class="fill-gray-600" :width="8" />
|
|
</TooltipContent>
|
|
</TooltipPortal>
|
|
</TooltipRoot>
|
|
</TooltipProvider>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
defineProps<{ text: string }>();
|
|
|
|
const open = ref(false);
|
|
</script>
|