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>