extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-10-06 10:12:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1188 from lkiesow/a11y-tooltip

Browse Source 
Make Tooltips Accessible
This commit is contained in:
advplyr 2022-11-20 16:47:27 -06:00 committed by GitHub
commit a2cd755ffa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/components/ui/Tooltip.vue
View File

@ -21,7 +21,8 @@ export default {
return {
tooltip: null,
tooltipId: null,
isShowing: false
isShowing: false,
hideTimeout: null
}
},
watch: {
@ -46,10 +47,12 @@ export default {
var tooltip = document.createElement('div')
this.tooltipId = String(Math.floor(Math.random() * 10000))
tooltip.id = this.tooltipId
tooltip.className = 'tooltip-wrapper absolute px-2 py-1 text-white pointer-events-none text-xs rounded shadow-lg max-w-xs text-center hidden sm:block'
tooltip.className = 'tooltip-wrapper absolute px-2 py-1 text-white text-xs rounded shadow-lg max-w-xs text-center hidden sm:block'
tooltip.style.zIndex = 100
tooltip.style.backgroundColor = 'rgba(0,0,0,0.85)'
tooltip.innerHTML = this.text
tooltip.addEventListener('mouseover', this.cancelHide);
tooltip.addEventListener('mouseleave', this.hideTooltip);
this.setTooltipPosition(tooltip)
@ -95,6 +98,7 @@ export default {
} catch (error) {
console.error(error)
}
this.isShowing = true
},
hideTooltip() {
@ -102,11 +106,16 @@ export default {
this.tooltip.remove()
this.isShowing = false
},
cancelHide() {
if (this.hideTimeout) clearTimeout(this.hideTimeout);
},
mouseover() {
if (!this.isShowing) this.showTooltip()
},
mouseleave() {
if (this.isShowing) this.hideTooltip()
if (this.isShowing) {
this.hideTimeout = setTimeout(this.hideTooltip, 100)
}
}
},
beforeDestroy() {