add more tooltips

2026-05-01 21:00:30 +00:00 · 2026-03-31 13:58:03 +08:00 · 2026-03-31 13:58:03 +08:00 · 50c3a53d6e
commit 50c3a53d6e
parent bc9228f73a
11 changed files with 108 additions and 15 deletions
--- a/next-ui/src/components/LocaleSelector.vue
+++ b/next-ui/src/components/LocaleSelector.vue
@ -2,6 +2,13 @@
  <v-menu>
    <template #activator="{ props }">
      <v-icon-btn
+        v-tooltip:bottom="
+          $formatMessage({
+            description: 'Locale selector button: tooltip',
+            defaultMessage: 'Language',
+            id: 'XR+P68',
+          })
+        "
        v-bind="props"
        icon="i-mdi:translate"
        :aria-label="
--- a/next-ui/src/components/PageSizeSelector.vue
+++ b/next-ui/src/components/PageSizeSelector.vue
@ -2,15 +2,10 @@
  <v-menu>
    <template #activator="{ props }">
      <v-icon-btn
+        v-tooltip:bottom="message"
        v-bind="props"
        icon="i-mdi:view-grid-plus"
-        :aria-label="
-          $formatMessage({
-            description: 'Page size selector button: aria-label',
-            defaultMessage: 'page size selector',
-            id: '2EMvSm',
-          })
-        "
+        :aria-label="message"
      />
    </template>

@ -44,6 +39,9 @@

 <script setup lang="ts">
 import type { PageSize } from '@/types/page'
+import { useIntl } from 'vue-intl'
+
+const intl = useIntl()

 const pageSize = defineModel<PageSize>({ required: true })

@ -51,6 +49,12 @@ const { sizes = [20, 50, 100, 200, 500], allowUnpaged = false } = defineProps<{
  sizes?: number[]
  allowUnpaged?: boolean
 }>()
+
+const message = intl.formatMessage({
+  description: 'Page size selector button',
+  defaultMessage: 'Page size',
+  id: 'XXr6pI',
+})
 </script>

 <script lang="ts"></script>
--- a/next-ui/src/components/PagingSelector.vue
+++ b/next-ui/src/components/PagingSelector.vue
@ -7,10 +7,24 @@
    color="primary"
  >
    <v-btn
+      v-tooltip:bottom="
+        $formatMessage({
+          description: 'View mode scroll button tooltip',
+          defaultMessage: 'Scroll',
+          id: '3DBPuv',
+        })
+      "
      icon="i-mdi:infinity"
      value="scroll"
    />
    <v-btn
+      v-tooltip:bottom="
+        $formatMessage({
+          description: 'View mode paginated button tooltip',
+          defaultMessage: 'Paginated',
+          id: 'bCFD9B',
+        })
+      "
      icon="i-mdi:view-grid"
      value="paged"
    />
--- a/next-ui/src/components/PosterSizeSlider.vue
+++ b/next-ui/src/components/PosterSizeSlider.vue
@ -2,6 +2,13 @@
  <v-slider
    v-if="display.smAndUp.value"
    v-model="appStore.gridCardWidth"
+    v-tooltip:bottom="
+      $formatMessage({
+        description: 'Poster size slider tooltip',
+        defaultMessage: 'Poster size',
+        id: 'O9hZBS',
+      })
+    "
    :min="130"
    :max="200"
    color="surface-darken"
--- a/next-ui/src/components/TempDrawer.vue
+++ b/next-ui/src/components/TempDrawer.vue
@ -11,7 +11,9 @@
      disable-route-watcher
    >
      <v-icon-btn
+        v-tooltip:bottom="closeMessage"
        icon="i-mdi:close"
+        :aria-label="closeMessage"
        variant="text"
        class="position-absolute top-0 right-0 me-2 mt-1"
        style="z-index: 2"
@ -23,8 +25,18 @@
 </template>

 <script setup lang="ts">
+import { useIntl } from 'vue-intl'
+
+const intl = useIntl()
+
 const model = defineModel<boolean>({ default: false })
 const { location = 'end' } = defineProps<{
  location?: 'top' | 'end' | 'bottom' | 'start' | 'left' | 'right'
 }>()
+
+const closeMessage = intl.formatMessage({
+  description: 'Temp drawer: close button',
+  defaultMessage: 'Close',
+  id: '/mhcNO',
+})
 </script>
--- a/next-ui/src/components/ThemeSelector.vue
+++ b/next-ui/src/components/ThemeSelector.vue
@ -1,5 +1,12 @@
 <template>
  <v-icon-btn
+    v-tooltip:bottom="
+      $formatMessage({
+        description: 'Theme selector button: tooltip',
+        defaultMessage: 'Theme',
+        id: 'e8DJzj',
+      })
+    "
    :icon="themeIcon"
    :aria-label="
      $formatMessage({
--- a/next-ui/src/components/apikey/GenerateDialog.vue
+++ b/next-ui/src/components/apikey/GenerateDialog.vue
@ -93,6 +93,13 @@
                        />
                        <v-icon
                          v-else
+                          v-tooltip:bottom="
+                            $formatMessage({
+                              description: 'Generate API key dialog: copy button tooltip',
+                              defaultMessage: 'Copy to clipboard',
+                              id: 'oOtDhj',
+                            })
+                          "
                          icon="i-mdi:content-copy"
                          @click="copy(createdKey.key)"
                        />
--- a/next-ui/src/components/layout/app/Bar.vue
+++ b/next-ui/src/components/layout/app/Bar.vue
@ -1,7 +1,10 @@
 <template>
  <v-app-bar elevation="1">
    <template #prepend>
-      <v-app-bar-nav-icon @click="appStore.drawer = !appStore.drawer">
+      <v-app-bar-nav-icon
+        v-tooltip:bottom="tooltipMessage"
+        @click="appStore.drawer = !appStore.drawer"
+      >
        <template #default>
          <v-badge
            :model-value="unreadCount > 0 && !appStore.drawer"
@ -34,9 +37,24 @@
 <script setup lang="ts">
 import { useAppStore } from '@/stores/app'
 import { useAnnouncements } from '@/colada/announcements'
+import { useIntl } from 'vue-intl'
+
+const intl = useIntl()

 const appStore = useAppStore()
 const { unreadCount } = useAnnouncements()
+
+const expandMessage = intl.formatMessage({
+  description: 'Locale selector button: tooltip expand',
+  defaultMessage: 'Expand menu',
+  id: 'wGVZsf',
+})
+const collapseMessage = intl.formatMessage({
+  description: 'Locale selector button: tooltip collapse',
+  defaultMessage: 'Collapse menu',
+  id: 'UgQ5iO',
+})
+const tooltipMessage = computed(() => (appStore.drawer ? collapseMessage : expandMessage))
 </script>

 <script lang="ts"></script>
--- a/next-ui/src/components/layout/app/drawer/ReorderLibraries.vue
+++ b/next-ui/src/components/layout/app/drawer/ReorderLibraries.vue
@ -10,15 +10,10 @@
      }}</v-list-item-title>
      <template #append>
        <v-icon-btn
+          v-tooltip:bottom="closeMessage"
          icon="i-mdi:close"
          variant="text"
-          :aria-label="
-            $formatMessage({
-              description: 'Reorder library drawer: aria label',
-              defaultMessage: 'close',
-              id: 'Ept33T',
-            })
-          "
+          :aria-label="closeMessage"
          @click="appStore.reorderLibraries = false"
        />
      </template>
@ -107,7 +102,9 @@ import type { components } from '@/generated/openapi/komga'
 import { CLIENT_SETTING_USER, type ClientSettingUserLibrary } from '@/types/ClientSettingsUser'
 import { useUpdateClientSettingsUser } from '@/colada/client-settings'
 import { useAppStore } from '@/stores/app'
+import { useIntl } from 'vue-intl'

+const intl = useIntl()
 const appStore = useAppStore()

 const { unpinned, pinned, refresh } = useLibraries()
@ -139,6 +136,12 @@ const draggableConfig = {
  chosenClass: 'chosen',
  animation: 150,
 }
+
+const closeMessage = intl.formatMessage({
+  description: 'Reorder library drawer: close button',
+  defaultMessage: 'Close',
+  id: 'lPZ5hy',
+})
 </script>

 <style lang="scss">
--- a/next-ui/src/components/layout/app/drawer/menu/Libraries.vue
+++ b/next-ui/src/components/layout/app/drawer/menu/Libraries.vue
@ -13,6 +13,13 @@
    <template #append>
      <v-icon-btn
        v-if="isAdmin"
+        v-tooltip:bottom="
+          $formatMessage({
+            description: 'Add library button: tooltip',
+            defaultMessage: 'Create library',
+            id: '70/wK4',
+          })
+        "
        icon="i-mdi:plus"
        variant="text"
        :aria-label="
--- a/next-ui/src/pages/libraries/[id]/series.vue
+++ b/next-ui/src/pages/libraries/[id]/series.vue
@ -34,6 +34,13 @@
      offset-y="7"
    >
      <v-icon-btn
+        v-tooltip:bottom="
+          $formatMessage({
+            description: 'Filter button: tooltip',
+            defaultMessage: 'Show filters',
+            id: 'kFQatO',
+          })
+        "
        icon="i-mdi:filter-variant"
        @click="filterDrawer = true"
      />