XKCD: Use tooltip for alt text

Lissy93 · Jan 7, 2023 · d4528a1 · d4528a1
1 parent 9ab6c59
commit d4528a1
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/src/components/Widgets/XkcdComic.vue b/src/components/Widgets/XkcdComic.vue
@@ -1,8 +1,8 @@
 <template>
-<div class="xkcd-wrapper">
+<div class="xkcd-wrapper" v-tooltip="toolTip(alt)">
   <h3 class="xkcd-title">{{ title }}</h3>
   <a :href="`https://xkcd.com/${comicNum}/`">
-    <img :src="image" :alt="alt" class="xkcd-comic" />
+    <img :src="image" :alt="alt" class="xkcd-comic"/>
   </a>
 </div>
 </template>
@@ -59,6 +59,12 @@ export default {
       this.alt = data.alt;
       this.comicNum = data.num;
     },
+    toolTip(alt) {
+      const content = alt;
+      return {
+        content, html: false, trigger: 'hover focus', delay: 250, classes: 'xkcd-alt-tt',
+      };
+    },
   },
 };
 </script>
@@ -80,3 +86,8 @@ export default {
 }
 
 </style>
+<style lang="scss">
+.xkcd-alt-tt {
+  min-width: 20rem;
+}
+</style>