use directive to add tooltip

+ change grid size for search page
+

src/components/shared/AlbumCard.vue

@@ -8,7 +8,7 @@
   >
     <img class="rounded" :src="imguri + album.image" alt="" />
     <div>
-      <h4 class="title ellip">{{ album.title }}</h4>
+      <h4 class="title ellip" v-tooltip="album.title">{{ album.title }}</h4>
       <div class="artist ellip">{{ album.artist }}</div>
     </div>
   </router-link>
@@ -30,7 +30,7 @@ defineProps<{
   gap: $small;
   padding: $small;
   transition: all 0.5s ease;
-  border-radius: .7rem;
+  border-radius: 0.7rem;
 
   img {
     width: 100%;
@@ -44,12 +44,13 @@ defineProps<{
   .title {
     margin-bottom: $smaller;
     font-size: 0.9rem;
+    width: fit-content;
   }
 
   .artist {
     font-size: 0.8rem;
     text-align: left;
-    opacity: .75;
+    opacity: 0.75;
   }
 }
 </style>

src/components/shared/ArtistCard.vue

@@ -42,10 +42,10 @@ defineProps<{
     object-fit: cover;
   }
 
-  &:hover {
-    .artist-image {
-      border-radius: 20%;
-    }
-  }
+  // &:hover {
+  //   .artist-image {
+  //     border-radius: 10%;
+  //   }
+  // }
 }
 </style>

src/components/shared/ArtistName.vue

@@ -1,17 +1,29 @@
 <template>
-  <div class="ellip" v-if="artists[0] !== ''">
-    <span v-for="artist in putCommas(artists)" :key="artist">{{ artist }}</span>
-  </div>
-  <div class="ellip" v-else>
-    <span>{{ albumartist }}</span>
+  <div v-tooltip="returnArtists()" style="width: auto;">
+    <div class="ellip" v-if="artists[0] !== '' && artists.length > 1">
+      <span v-for="artist in putCommas(artists)" :key="artist">{{
+        artist
+      }}</span>
+    </div>
+    <div class="ellip" v-else>
+      <span>{{ albumartist }}</span>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { putCommas } from "@/utils";
 
-defineProps<{
+const props = defineProps<{
   artists: string[];
   albumartist: string | undefined;
 }>();
+
+function returnArtists() {
+  if (props.artists[0] !== "" && props.artists.length > 1) {
+    return props.artists.join(", ");
+  } else {
+    return props.albumartist;
+  }
+}
 </script>

src/components/shared/SongItem.vue

@@ -20,7 +20,7 @@
           :class="{ last_played: !isPlaying }"
         ></div>
       </div>
-      <div @mouseover="showToolTip" @mouseleave="hideToolTip">
+      <div v-tooltip="track.title">
         <div class="title ellip" @click="emitUpdate(track)" ref="artisttitle">
           {{ track.title }}
         </div>
@@ -30,9 +30,6 @@
             :albumartist="track.albumartist"
           />
         </div>
-        <div class="tooltip" ref="tooltip">
-          {{ track.title }}
-        </div>
       </div>
     </div>
     <div class="song-artists">
@@ -40,6 +37,7 @@
     </div>
     <router-link
       class="song-album ellip"
+      v-tooltip="track.album"
       :to="{
         name: 'AlbumView',
         params: {
@@ -64,7 +62,6 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { createPopper } from "@popperjs/core";
 
 import OptionSvg from "@/assets/icons/more.svg";
 
@@ -99,38 +96,6 @@ function emitUpdate(track: Track) {
 function showMenu(e: Event) {
   showContext(e, props.track, options_button_clicked);
 }
-
-let isHovering = false;
-
-function showToolTip() {
-  isHovering = true;
-
-  setTimeout(() => {
-    if (isHovering) {
-      const ttip = tooltip.value as HTMLElement;
-      const atitle = artisttitle.value as HTMLElement;
-
-      ttip.style.display = "unset";
-
-      createPopper(atitle, ttip, {
-        placement: "top",
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [10, 10],
-            },
-          },
-        ],
-      });
-    }
-  }, 500);
-}
-
-function hideToolTip() {
-  (tooltip.value as HTMLElement).style.display = "none";
-  isHovering = false;
-}
 </script>
 
 <style lang="scss">
@@ -143,17 +108,6 @@ function hideToolTip() {
   gap: 1rem;
   user-select: none;
 
-  .tooltip {
-    background-color: $darkestblue;
-    border-radius: $smaller;
-    padding: $smaller;
-    font-size: 0.85rem;
-    display: none;
-    position: absolute;
-    margin: 1rem;
-    z-index: 300;
-  }
-
   &:hover {
     background-color: $gray4;
 
@@ -172,6 +126,9 @@ function hideToolTip() {
   }
 
   .song-artists {
+    width: fit-content;
+    max-width: 100%;
+
     .artist {
       cursor: pointer;
     }
@@ -181,7 +138,7 @@ function hideToolTip() {
     opacity: 0.5;
     font-size: 0.8rem;
     width: 100%;
-    margin-left: $small;
+    // margin-left: $small;
   }
 
   .song-duration {

src/components/shared/TrackItem.vue

@@ -19,7 +19,7 @@
       ></div>
     </div>
     <div class="tags">
-      <div class="title ellip">
+      <div class="title ellip" v-tooltip="track.title">
         {{ track.title }}
       </div>
       <hr />
@@ -94,6 +94,12 @@ const playThis = (track: Track) => {
   align-items: center;
   padding: $small 1rem;
 
+  .tags {
+    .title {
+      width: fit-content;
+    }
+  }
+
   .remove-track {
     opacity: 0;
     transition: all 0.25s ease;
@@ -139,7 +145,7 @@ const playThis = (track: Track) => {
 
   .artist {
     font-size: small;
-    opacity: .67;
+    opacity: 0.67;
   }
 }
 </style>