Добавил подсказку при наведении на дату

resources/js/Components/DatePickerQuery.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {NDatePicker, NIcon, NFlex, NButton, NSkeleton} from 'naive-ui'
+import {NDatePicker, NIcon, NFlex, NTooltip, NSkeleton} from 'naive-ui'
 import {computed, ref} from "vue";
 import {router} from "@inertiajs/vue3";
 import {TbCalendar} from 'vue-icons-plus/tb'
@@ -19,6 +19,10 @@ const props = defineProps({
     isShowCurrentDateSwitch: {
         type: Boolean,
         default: false
+    },
+    hint: {
+        type: Boolean,
+        default: false
     }
 })
 
@@ -224,7 +228,46 @@ const quickButtonText = computed(() => {
 </script>
 
 <template>
-    <div class="relative inline-flex items-center">
+    <NTooltip v-if="hint" placement="right" width="220" :arrow="false">
+        <template #trigger>
+            <div v-bind="$attrs" class="relative inline-flex items-center">
+                <template v-if="isLoading">
+                    <NSkeleton width="240" height="20" round />
+                </template>
+                <template v-else>
+                    <div
+                        v-if="formattedValue"
+                        class="font-medium leading-3 cursor-pointer"
+                        @click="showCalendar = true"
+                    >
+                        {{ formattedValue }}
+                    </div>
+
+                    <NDatePicker
+                        v-model:value="modelValue"
+                        v-model:show="showCalendar"
+                        class="opacity-0 absolute! inset-x-0 bottom-full -translate-y-1/2"
+                        placement="top-start"
+                        :shortcuts="shortcuts"
+                        :is-date-disabled="isDateDisabled"
+                        input-readonly
+                        bind-calendar-months
+                        type="daterange"
+                        @update:value="handleDateUpdate"
+                    >
+                    </NDatePicker>
+
+                    <div class="cursor-pointer p-2 flex items-center justify-center" @click="showCalendar = true">
+                        <NIcon size="20">
+                            <TbCalendar />
+                        </NIcon>
+                    </div>
+                </template>
+            </div>
+        </template>
+        <span class="text-sm">Учёт времени с 09:00 текущих суток по 09:00 следующих суток</span>
+    </NTooltip>
+    <div v-else v-bind="$attrs" class="relative inline-flex items-center">
         <template v-if="isLoading">
             <NSkeleton width="240" height="20" round />
         </template>