tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-25 14:44:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

XKCD: Use tooltip for alt text

Browse Source
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> <template>
<div class="xkcd-wrapper"> <div class="xkcd-wrapper" v-tooltip="toolTip(alt)">
<h3 class="xkcd-title">{{ title }}</h3> <h3 class="xkcd-title">{{ title }}</h3>
<a :href="`https://xkcd.com/${comicNum}/`"> <a :href="`https://xkcd.com/${comicNum}/`">
<img :src="image" :alt="alt" class="xkcd-comic" /> <img :src="image" :alt="alt" class="xkcd-comic"/>
</a> </a>
</div> </div>
</template> </template>
@ -59,6 +59,12 @@ export default {
this.alt = data.alt; this.alt = data.alt;
this.comicNum = data.num; this.comicNum = data.num;
}, },
toolTip(alt) {
const content = alt;
return {
content, html: false, trigger: 'hover focus', delay: 250, classes: 'xkcd-alt-tt',
};
},
}, },
}; };
</script> </script>
@ -80,3 +86,8 @@ export default {
} }
</style> </style>
<style lang="scss">
.xkcd-alt-tt {
min-width: 20rem;
}
</style>