feat(kitchen sink / inbox): add tooltip

gitsindonesia · Jun 19, 2023 · fd5a4cf · fd5a4cf · github-actions · Jun 19, 2023
1 parent 942214e
commit fd5a4cf
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 8 deletions.
diff --git a/starter/kitchen-sink/components/inbox/Navbar.vue b/starter/kitchen-sink/components/inbox/Navbar.vue
@@ -10,13 +10,49 @@
       </div>
       <nav class="flex gap-2 flex-1">
         <VInput wrapper-class="flex-grow" placeholder="Search in mail" />
-        <VBtn prefix-icon="ri:settings-3-line" icon text fab />
-        <VBtn prefix-icon="ri:apps-2-line" icon text fab />
-        <ColorModeSwitcher />
-        <VDropdown right panel-class="!z-40">
+        <VBtn
+          v-tooltip="{
+            content: 'Settings',
+            placement: 'bottom',
+            theme: 'tooltip-black',
+            triggers: ['hover', 'focus'],
+          }"
+          prefix-icon="ri:settings-3-line"
+          icon
+          text
+          fab
+        />
+        <VBtn
+          v-tooltip="{
+            content: 'Apps',
+            placement: 'bottom',
+            theme: 'tooltip-black',
+            triggers: ['hover', 'focus'],
+          }"
+          prefix-icon="ri:apps-2-line"
+          icon
+          text
+          fab
+        />
+        <ColorModeSwitcher
+          v-tooltip="{
+            content: 'Switch apperance',
+            placement: 'bottom',
+            theme: 'tooltip-black',
+            triggers: ['hover', 'focus'],
+          }"
+        />
+        <VDropdown right>
           <template #activator>
-            <VDropdownButton>
-              <VAvatar color="secondary" size="xl">W</VAvatar>
+            <VDropdownButton
+              v-tooltip="{
+                content: 'Account',
+                placement: 'bottom',
+                theme: 'tooltip-black',
+                triggers: ['hover', 'focus'],
+              }"
+            >
+              <VAvatar color="secondary" size="44">W</VAvatar>
             </VDropdownButton>
           </template>
           <VDropdownItem>Profile</VDropdownItem>

diff --git a/starter/kitchen-sink/components/inbox/RightSidebar.vue b/starter/kitchen-sink/components/inbox/RightSidebar.vue
@@ -5,8 +5,30 @@
 <template>
   <VNavDrawer mini class="px-4 py-3 sticky top-16 self-start !h-auto">
     <nav class="flex flex-col items-center py-2 gap-2">
-      <VBtn prefix-icon="ri:calendar-line" fab icon text />
-      <VBtn prefix-icon="ri:file-text-line" fab icon text />
+      <VBtn
+        prefix-icon="ri:calendar-line"
+        fab
+        icon
+        text
+        v-tooltip="{
+          content: 'Apps 1',
+          placement: 'left',
+          theme: 'tooltip-black',
+          triggers: ['hover', 'focus'],
+        }"
+      />
+      <VBtn
+        prefix-icon="ri:file-text-line"
+        fab
+        icon
+        text
+        v-tooltip="{
+          content: 'Apps 2',
+          placement: 'left',
+          theme: 'tooltip-black',
+          triggers: ['hover', 'focus'],
+        }"
+      />
     </nav>
   </VNavDrawer>
 </template>