From d4528a1afe44c7bca99285a61a41802619c16f63 Mon Sep 17 00:00:00 2001
From: Matthias Bilger <matthias@bilger.info>
Date: Sat, 7 Jan 2023 17:22:02 +0100
Subject: [PATCH] XKCD: Use tooltip for alt text

---
 src/components/Widgets/XkcdComic.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Widgets/XkcdComic.vue b/src/components/Widgets/XkcdComic.vue
index f42f6eae..2aed03cf 100644
--- 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>