Fixed tooltip position on client side component
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user