selfhosted
/
dashy
mirror of https://github.com/lissy93/dashy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

XKCD: Use tooltip for alt text

This commit is contained in:
Matthias Bilger 2023-01-07 17:22:02 +01:00
parent 9ab6c59f19
commit d4528a1afe
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Widgets/XkcdComic.vue
View File

@ -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>