tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🔀 Merge pull request #1043 from m42e/xkcd-show-alt 

XKCD: Use tooltip for alt text
This commit is contained in:
Alicia Sykes 2023-01-07 21:55:11 +00:00 committed by GitHub
parent 0fc664fb08 d4528a1afe
commit a5f3c20810
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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>