Display tooltip with book details on card hover

client/components/cards/LazyBookCard.vue

@@ -1,5 +1,6 @@
 <template>
   <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <ui-tooltip :direction="'top'" :text="getTooltipText()">
       <div :id="`cover-area-${index}`" class="relative w-full top-0 left-0 rounded overflow-hidden z-10 bg-primary box-shadow-book" :style="{ height: coverHeight + 'px ' }">
         <!-- When cover image does not fill -->
         <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
@@ -123,6 +124,7 @@
           </div>
         </div>
       </div>
+    </ui-tooltip>
 
     <!-- Alternative bookshelf title/author/sort -->
     <div cy-id="detailBottom" :id="`description-area-${index}`" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="relative mt-2e mb-2e left-0 z-50 w-full">
@@ -333,6 +335,9 @@ export default {
     authorLF() {
       return this.mediaMetadata.authorNameLF
     },
+    description() {
+      return this.mediaMetadata.description || ''
+    },
     artist() {
       const artists = this.mediaMetadata.artists || []
       return artists.join(', ')
@@ -1099,6 +1104,20 @@ export default {
           this.showCoverBg = false
         }
       }
+    },
+    getTooltipText() {
+      const maxLength = 500
+      const truncatedSynopsis = this.description.length > maxLength ? this.description.substring(0, maxLength) + '...' : this.description
+      const duration = this.media.duration ? this.$elapsedPrettyExtended(this.media.duration, false) : ''
+      let tooltipText = '<div style="text-align: left;">'
+      if (truncatedSynopsis) {
+        tooltipText += `<strong>Synopsis</strong> <br/>${truncatedSynopsis} <br/><br/>`
+      }
+      if (duration) {
+        tooltipText += `<strong>Duration</strong><br/>${duration}`
+      }
+      tooltipText += '</div>'
+      return tooltipText
     }
   },
   mounted() {