Remove mouseleave events because mouse users with tremors will have p…

…roblems with them.
PublicisSapient · Oct 18, 2024 · bc57cb5 · bc57cb5
1 parent 9b80b9e
commit bc57cb5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/js/modules/es4/tooltip.js b/js/modules/es4/tooltip.js
@@ -104,6 +104,12 @@ const tooltip = new (function() {
     this.show = (e) => {
         tooltipTarget = e.target;
 
+        const closestTooltipEl = tooltipTarget.closest('[data-tooltip]');
+
+        if (closestTooltipEl !== null) {
+            tooltipTarget = closestTooltipEl;
+        }
+
         const text = tooltipTarget.dataset.tooltip;
         if (!text || (isTooltipVisible && tooltipBelongsTo === tooltipTarget)) {
             return;
@@ -135,9 +141,6 @@ const tooltip = new (function() {
             tooltipStyle.top = `calc(${tooltipTargetRect.top + window.scrollY - tooltipHeight}px - 1em)`
         }
 
-        tooltipTarget.addEventListener('mouseleave', this.hide);
-        tooltipEl.addEventListener('mouseleave', this.hide);
-
         tooltipEl.dispatchEvent(
             new CustomEvent('enable-show', { bubbles: true })
         );
@@ -170,8 +173,6 @@ const tooltip = new (function() {
         }
 
         if (tooltipTarget) {
-            tooltipTarget.removeEventListener('mouseleave', this.hide);
-            tooltipEl.removeEventListener('mouseleave', this.hide);
             if (tooltipTarget.tagName === 'INPUT'){
                 tooltipTarget.removeAttribute('aria-describedby');
             }

diff --git a/js/modules/tooltip.js b/js/modules/tooltip.js
@@ -104,6 +104,12 @@ const tooltip = new function () {
     this.show = (e) => {
         tooltipTarget = e.target;
 
+        const closestTooltipEl = tooltipTarget.closest('[data-tooltip]');
+
+        if (closestTooltipEl !== null) {
+            tooltipTarget = closestTooltipEl;
+        }
+
         const text = tooltipTarget.dataset.tooltip;
         if (!text || (isTooltipVisible && tooltipBelongsTo === tooltipTarget)) {
             return;
@@ -135,9 +141,6 @@ const tooltip = new function () {
             tooltipStyle.top = `calc(${tooltipTargetRect.top + window.scrollY - tooltipHeight}px - 1em)`
         }
 
-        tooltipTarget.addEventListener('mouseleave', this.hide);
-        tooltipEl.addEventListener('mouseleave', this.hide);
-
         tooltipEl.dispatchEvent(
             new CustomEvent('enable-show', { bubbles: true })
         );
@@ -170,8 +173,6 @@ const tooltip = new function () {
         }
 
         if (tooltipTarget) {
-            tooltipTarget.removeEventListener('mouseleave', this.hide);
-            tooltipEl.removeEventListener('mouseleave', this.hide);
             if (tooltipTarget.tagName === 'INPUT'){
                 tooltipTarget.removeAttribute('aria-describedby');
             }