Update tooltip with plaintext prop

client/components/cards/LazyBookCard.vue

@@ -78,7 +78,7 @@
         </div>
 
         <!-- Error widget -->
-        <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4e left-0 z-10">
+        <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" plaintext class="absolute bottom-4e left-0 z-10">
           <div :style="{ height: 1.5 + 'em', width: 2.5 + 'em' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
             <span class="material-symbols text-red-100 pr-1e" :style="{ fontSize: 0.875 + 'em' }">priority_high</span>
           </div>
@@ -121,12 +121,12 @@
     <!-- 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">
       <div :style="{ fontSize: 0.9 + 'em' }">
-        <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
+        <ui-tooltip v-if="displayTitle" :text="displayTitle" plaintext :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
           <p cy-id="title" ref="displayTitle" class="truncate">{{ displayTitle }}</p>
           <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
         </ui-tooltip>
       </div>
-      <ui-tooltip v-if="showSubtitles" :text="displaySubtitle" :disabled="!displaySubtitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
+      <ui-tooltip v-if="showSubtitles" :text="displaySubtitle" plaintext :disabled="!displaySubtitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
         <p cy-id="subtitle" class="truncate" ref="displaySubtitle" :style="{ fontSize: 0.6 + 'em' }">{{ displaySubtitle }}</p>
       </ui-tooltip>
       <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displayLineTwo || '&nbsp;' }}</p>

client/components/stats/DailyListeningChart.vue

@@ -14,7 +14,7 @@
         <div :key="n" class="absolute pointer-events-none left-0 h-px bg-white/10" :style="{ top: n * lineSpacing - lineSpacing / 2 + 'px', width: '360px', marginLeft: '24px' }" />
 
         <div :key="`dot-${n}`" class="absolute z-10" :style="{ left: points[n - 1].x + 'px', bottom: points[n - 1].y + 'px' }">
-          <ui-tooltip :text="last7DaysOfListening[n - 1].minutesListening" direction="top">
+          <ui-tooltip :text="last7DaysOfListening[n - 1].minutesListening" plaintext direction="top">
             <div class="h-2 w-2 bg-yellow-400 hover:bg-yellow-300 rounded-full transform duration-150 transition-transform hover:scale-125" />
           </ui-tooltip>
         </div>

client/components/ui/Tooltip.vue

@@ -22,7 +22,8 @@ export default {
       type: Number,
       default: 0
     },
-    disabled: Boolean
+    disabled: Boolean,
+    plaintext: Boolean
   },
   data() {
     return {
@@ -46,7 +47,11 @@ export default {
   methods: {
     updateText() {
       if (this.tooltip) {
-        this.tooltip.innerHTML = this.text
+        if (this.plaintext) {
+          this.tooltip.textContent = this.text
+        } else {
+          this.tooltip.innerHTML = this.text
+        }
         this.setTooltipPosition(this.tooltip)
       }
     },
@@ -58,7 +63,11 @@ export default {
       tooltip.className = 'tooltip-wrapper absolute px-2 py-1 text-white text-xs rounded-sm shadow-lg max-w-xs text-center hidden sm:block'
       tooltip.style.zIndex = 100
       tooltip.style.backgroundColor = 'rgba(0,0,0,0.85)'
-      tooltip.innerHTML = this.text
+      if (this.plaintext) {
+        tooltip.textContent = this.text
+      } else {
+        tooltip.innerHTML = this.text
+      }
       tooltip.addEventListener('mouseover', this.cancelHide)
       tooltip.addEventListener('mouseleave', this.hideTooltip)
 

client/pages/audiobook/_id/chapters.vue

@@ -126,7 +126,7 @@
               <ui-tooltip v-if="selectedChapterId === chapter.id && (isPlayingChapter || isLoadingChapter)" :text="$strings.TooltipAdjustChapterStart" direction="bottom">
                 <div class="ml-2 text-xs text-gray-300 font-mono min-w-10 cursor-pointer hover:text-white transition-colors duration-150" @click="adjustChapterStartTime(chapter)">{{ elapsedTime }}s</div>
               </ui-tooltip>
-              <ui-tooltip v-if="chapter.error" :text="chapter.error" direction="left">
+              <ui-tooltip v-if="chapter.error" :text="chapter.error" plaintext direction="left">
                 <button class="w-7 h-7 rounded-full flex items-center justify-center text-error">
                   <span class="material-symbols text-lg">error_outline</span>
                 </button>