Tooltip show/hide work in progress

src/components/SongItem.vue

@@ -132,30 +132,36 @@ const openSong = el => {
       </a>
     </span>
 
-    <span
+    <button
       class="bi bi-three-dots-vertical popup-wrap ign"
       @mouseenter="show = true"
-      @mouseleave="show = false">
+      @mouseleave="show = false"
+      @click.enter="show = player.toggle('tooltipIsOpen')"
+    >
       <Transition name="fade">
         <div v-if="show" class="popup ign">
-          <span
+          <button
             v-if="playlistId || offlineUri"
             class="bi bi-dash-lg clickable ign"
-            @click="Remove"></span>
+            @click="Remove">
-          <span
+          </button>
+          <button
             class="bi bi-chevron-bar-right clickable ign"
-            @click="appendSong"></span>
+            @click="appendSong">
-          <span
+          </button>
+          <button
             class="bi bi-collection clickable ign"
-            @click="showPl = true"></span>
+            @click="showPl = true">
-          <span
+          </button>
+          <button
             class="bi bi-broadcast clickable ign"
-            @click="$emit('nxt-song')"></span>
+            @click="$emit('nxt-song')">
-          <span class="bi bi-plus-lg clickable ign" @click="addSong"></span>
+          </button>
-          <span class="bi bi-share clickable ign" @click="Share"></span>
+          <button class="bi bi-plus-lg clickable ign" @click="addSong"></button>
+          <button class="bi bi-share clickable ign" @click="Share"></button>
         </div>
       </Transition>
-    </span>
+    </button>
   </div>
 </template>
 
@@ -177,6 +183,9 @@ span.content {
 span.bi-three-dots-vertical {
   margin: 2rem;
 }
+button.bi-three-dots-vertical {
+  border: none;
+}
 .popup {
   line-height: auto;
   height: auto;

src/stores/player.js

@@ -17,6 +17,7 @@ export const useData = defineStore('data', () => {
       lyrics: '',
       src: [],
       urls: [],
+      tooltipIsOpen: false,
     }),
     player = usePlayer();
 
@@ -148,10 +149,16 @@ export const usePlayer = defineStore('player', () => {
     info: false,
     add: false,
     vol: store.vol ? store.vol / 100 : 1,
+    tooltipIsOpen: false,
   });
 
   function toggle(i) {
-    if (typeof state[i] == 'boolean') state[i] = !state[i];
+    console.log(i)
+    console.log(state[i])
+    if (typeof state[i] == 'boolean') {
+      console.log(state[i])
+      return state[i] = !state[i]
+    }
   }
 
   function setTime(t) {

vite.config.mjs

@@ -2,51 +2,51 @@ import { fileURLToPath, URL } from 'url';
 
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import { VitePWA } from 'vite-plugin-pwa';
+// import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
-    VitePWA({
+    // VitePWA({
-      registerType: 'autoUpdate',
+    //   registerType: 'autoUpdate',
-      workbox: {
+    //   workbox: {
-        globPatterns: [
+    //     globPatterns: [
-          '**/*.{css,html,png,svg,woff,woff2}',
+    //       '**/*.{css,html,png,svg,woff,woff2}',
-          'manifest.webmanifest',
+    //       'manifest.webmanifest',
-          '**/index*.js',
+    //       '**/index*.js',
-          '**/shaka*.js',
+    //       '**/shaka*.js',
-          '**/[A-Z]*.js',
+    //       '**/[A-Z]*.js',
-        ],
+    //     ],
-      },
+    //   },
-      manifest: {
+    //   manifest: {
-        name: 'Hyperpipe',
+    //     name: 'Hyperpipe',
-        short_name: 'Hyperpipe',
+    //     short_name: 'Hyperpipe',
-        start_url: '/',
+    //     start_url: '/',
-        display: 'standalone',
+    //     display: 'standalone',
-        background_color: '#000',
+    //     background_color: '#000',
-        theme_color: '#000',
+    //     theme_color: '#000',
-        description: 'Privacy respecting YouTube Music Frontend.',
+    //     description: 'Privacy respecting YouTube Music Frontend.',
-        icons: [
+    //     icons: [
-          {
+    //       {
-            src: '/android-chrome-192x192.png',
+    //         src: '/android-chrome-192x192.png',
-            sizes: '192x192',
+    //         sizes: '192x192',
-            type: 'image/png',
+    //         type: 'image/png',
-          },
+    //       },
-          {
+    //       {
-            src: '/android-chrome-512x512.png',
+    //         src: '/android-chrome-512x512.png',
-            sizes: '512x512',
+    //         sizes: '512x512',
-            type: 'image/png',
+    //         type: 'image/png',
-          },
+    //       },
-          {
+    //       {
-            src: '/android-maskable.png',
+    //         src: '/android-maskable.png',
-            sizes: '1024x1024',
+    //         sizes: '1024x1024',
-            type: 'image/png',
+    //         type: 'image/png',
-            purpose: 'maskable',
+    //         purpose: 'maskable',
-          },
+    //       },
-        ],
+    //     ],
-      },
+    //   },
-    }),
+    // }),
   ],
   resolve: {
     alias: {