fix(nc-gui): tooltips

packages/nc-gui/components/nc/DateWeekSelector.vue

@@ -140,13 +140,24 @@ const paginate = (action: 'next' | 'prev') => {
       }"
       class="flex items-center"
     >
-      <NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('prev')">
-        <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
-      </NcButton>
+      <NcTooltip>
+        <NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('prev')">
+          <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
+        </NcButton>
+        <template #title>
+          <span>{{ $t('labels.previousMonth') }}</span>
+        </template>
+      </NcTooltip>
+
       <span class="font-bold text-gray-700">{{ currentMonth }}</span>
-      <NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('next')">
-        <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
-      </NcButton>
+      <NcTooltip>
+        <NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('next')">
+          <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
+        </NcButton>
+        <template #title>
+          <span>{{ $t('labels.nextMonth') }}</span>
+        </template>
+      </NcTooltip>
     </div>
     <div class="border-1 border-gray-200 rounded-y-xl max-w-[320px]">
       <div class="flex flex-row bg-gray-100 gap-2 rounded-t-xl justify-between p-2">

packages/nc-gui/components/nc/MonthYearSelector.vue

@@ -91,13 +91,23 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
 <template>
   <div class="p-4 flex flex-col gap-4">
     <div class="flex justify-between items-center">
-      <NcButton size="small" type="secondary" @click="paginate('prev')">
-        <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
-      </NcButton>
+      <NcTooltip>
+        <NcButton size="small" type="secondary" @click="paginate('prev')">
+          <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
+        </NcButton>
+        <template #title>
+          <span>{{ $t('labels.previousYear') }}</span>
+        </template>
+      </NcTooltip>
       <span class="font-bold text-gray-700">{{ yearPicker ? 'Select Year' : currentYear }}</span>
-      <NcButton size="small" type="secondary" @click="paginate('next')">
-        <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
-      </NcButton>
+      <NcTooltip>
+        <NcButton size="small" type="secondary" @click="paginate('next')">
+          <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
+        </NcButton>
+        <template #title>
+          <span>{{ $t('labels.nextYear') }}</span>
+        </template>
+      </NcTooltip>
     </div>
     <div class="border-1 border-gray-200 rounded-y-xl max-w-[350px]">
       <div class="grid grid-cols-4 gap-2 p-2">

packages/nc-gui/lang/en.json

@@ -437,6 +437,10 @@
     "ssoSettings": "SSO Settings",
     "organizeRecordsBy": "Organize records by",
     "organizeBy": "Organize by",
+    "previousYear": "Previous Year",
+    "previousMonth": "Previous Month",
+    "nextMonth": "Next Month",
+    "nextYear": "Next Year",
     "organiseBy": "Organise by",
     "heading1": "Heading 1",
     "heading2": "Heading 2",