Fixed tooltip position on client side component

This commit is contained in:
Alexis
2025-08-04 16:45:46 +02:00
parent 2199359b96
commit 9b8f48ad8e
2 changed files with 24 additions and 24 deletions

View File

@@ -6,20 +6,20 @@ const { isReadOnly } = storeToRefs(useCalendar())
</script> </script>
<template> <template>
<UiTooltipProvider :delay-duration="250"> <ClientOnly>
<UiTooltip> <UiTooltipProvider :delay-duration="250">
<UiTooltipTrigger as-child> <UiTooltip>
<ClientOnly> <UiTooltipTrigger as-child>
<UiButton v-if="!isReadOnly" variant="secondary" size="icon" @click="toggleCategoriesModal(true)"> <UiButton v-if="!isReadOnly" variant="secondary" size="icon" @click="toggleCategoriesModal(true)">
<PhTag size="20" weight="light" /> <PhTag size="20" weight="light" />
</UiButton> </UiButton>
</ClientOnly> </UiTooltipTrigger>
</UiTooltipTrigger> <UiTooltipContent>
<UiTooltipContent> <p>
<p> {{ $t('entity.calendar.seeCategories') }}
{{ $t('entity.calendar.seeCategories') }} </p>
</p> </UiTooltipContent>
</UiTooltipContent> </UiTooltip>
</UiTooltip> </UiTooltipProvider>
</UiTooltipProvider> </ClientOnly>
</template> </template>

View File

@@ -16,10 +16,10 @@ const breakpoints = useBreakpoints(
</script> </script>
<template> <template>
<UiTooltipProvider :delay-duration="250"> <ClientOnly>
<UiTooltip> <UiTooltipProvider :delay-duration="250">
<UiTooltipTrigger as-child> <UiTooltip>
<ClientOnly> <UiTooltipTrigger as-child>
<UiButton <UiButton
:size="breakpoints.md.value ? 'default' : 'icon'" :size="breakpoints.md.value ? 'default' : 'icon'"
variant="secondary" variant="secondary"
@@ -31,11 +31,11 @@ const breakpoints = useBreakpoints(
{{ $t('entity.calendar.date.today') }} {{ $t('entity.calendar.date.today') }}
</span> </span>
</UiButton> </UiButton>
</ClientOnly> </UiTooltipTrigger>
</UiTooltipTrigger> <UiTooltipContent>
<UiTooltipContent> <p>{{ defaultDateFormatted }}</p>
<p>{{ defaultDateFormatted }}</p> </UiTooltipContent>
</UiTooltipContent> </UiTooltip>
</UiTooltip> </UiTooltipProvider>
</UiTooltipProvider> </ClientOnly>
</template> </template>