Make Tooltips Accessible

When using accessibility tools like screen magnifiers, dynamic screen
content can be quite problematic. In particular content, which only
appears if you interact with elements somewhere else on the screen. That
is the case, for example, with the current implementation of tooltips
used by audiobookshelf.

This patch provides a slight adjustment, keeping the tooltips open if
you hover over them. This allows users to have better access to the
content.

client/components/ui/Tooltip.vue

@@ -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() {