feat: tooltip and popover components

components/smart/AccentModePicker.vue

@@ -14,7 +14,8 @@
       <span
         v-for="(color, index) of accentColors"
         :key="`color-${index}`"
-        v-tooltip="capitalized(color)"
+        v-tippy="{ theme: 'tooltip' }"
+        title="capitalized(color)"
         class="
           inline-flex
           items-center

components/smart/ChangeLanguage.vue

@@ -9,10 +9,7 @@
       :animate-fill="false"
     >
       <template #trigger>
-        <button
-          v-tippy="{ animateFill: false, theme: 'tooltip' }"
-          :title="$t('choose_language')"
-        >
+        <button v-tippy="{ theme: 'tooltip' }" :title="$t('choose_language')">
           <span class="mr-2 text-lg">
             {{
               $i18n.locales.find(({ code }) => code == $i18n.locale).country

components/smart/ColorModePicker.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col">
     <label>
-      <ColorScheme placeholder="..." tag="span">
+      <!-- <ColorScheme placeholder="..." tag="span">
         {{ $t("background") }}:
         {{
           $colorMode.preference.charAt(0).toUpperCase() +
@@ -10,13 +10,14 @@
         <span v-if="$colorMode.preference === 'system'">
           ({{ $colorMode.value }} mode detected)
         </span>
-      </ColorScheme>
+      </ColorScheme> -->
     </label>
     <div>
       <span
         v-for="(color, index) of colors"
         :key="`color-${index}`"
-        v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
         class="
           inline-flex
           items-center

components/smart/HideMenu.vue

@@ -1,6 +1,7 @@
 <template>
   <div
-    v-tooltip="$t(active ? 'hide_sidebar' : 'show_sidebar')"
+    v-tippy="{ theme: 'tooltip' }"
+    :title="$t(active ? 'hide_sidebar' : 'show_sidebar')"
     class="
       absolute
       hidden