STCOM-1391 Tooltip - check for hover on tooltip content before closin…

…g the tooltip. (#2411)

According to
[WCAG](https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus), content
that's available/visible on hover should remain visible when the content
itself is hovered... mouse-readers everywhere unite!

### Approach
Tooltip already uses timeouts to provide a brief gap between event
listeners and state updates. This implementation added a timeout to
hiding the tooltip where we only hide the tooltip if neither the trigger
nor the tooltip element itself are hovered by the mouse (using
`matches(':hover')`). The CSS of the tooltip class had to be affected to
observe mouse events since they are all placed in the
`#OverlayContainer` by default.

CHANGELOG.md

@@ -16,6 +16,7 @@
 * Clear filter value after an action chosen from `MultiSelection` menu. Refs STCOM-1385.
 * ExportCSV - fix usage within `<Modal>`s by rendering the download link to the `div#OverlayContainer`. Refs STCOM-1387.
 * `<MenuSection>` should default its heading/label tag to `H3` instead of `H1`. Refs STCOM-1392.
+* `<Tooltip>` should allow for tooltip content to be hovered without closing the tooltip. Refs STCOM-1391.
 * `<AdvancedSearchRow>` - change `aria-label` for the input box to enter a search query and the Boolean operator dropdown. Refs STCOM-1195.
 
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)

lib/Tooltip/Tooltip.css

@@ -21,6 +21,7 @@
   animation-timing-function: ease-in;
   animation-duration: 0.1s;
   font-size: var(--font-size-small);
+  pointer-events: all;
 }
 
 .text {

lib/Tooltip/Tooltip.js

@@ -48,6 +48,7 @@ export default class Tooltip extends Component {
   constructor(props) {
     super(props);
     this.triggerRef = props.triggerRef || createRef(null);
+    this.overlayRef = createRef(null);
   }
 
   state = {
@@ -99,10 +100,22 @@ export default class Tooltip extends Component {
     const disable = hideOnTouch && isTouch;
     clearTimeout(this.timeout);
 
-    if (bool !== open && !disable) {
-      this.setState({
-        open: bool,
-      });
+    // Accessibility - When hiding the tooltip, ensure that the mouse is not hovered over the tooltip
+    // - for mouse readers (WCAG 2.1 - 1.4.13 )
+    if (!bool) {
+      if (!this.overlayRef?.current?.matches(':hover') &&
+        !this.triggerRef?.current?.matches(':hover')
+      ) {
+        this.setState({
+          open: bool,
+        });
+      }
+    } else {
+      if (bool !== open && !disable) {
+        this.setState({
+          open: bool,
+        });
+      }
     }
   }
 
@@ -114,7 +127,7 @@ export default class Tooltip extends Component {
 
   hide = () => {
     clearTimeout(this.timeout);
-    this.toggle(false);
+    this.timeout = setTimeout(() => this.toggle(false), 150);
   }
 
   /**
@@ -213,7 +226,7 @@ export default class Tooltip extends Component {
           placement={placement}
           modifiers={modifiers}
         >
-          <div className={css.tooltip} aria-hidden data-test-tooltip>
+          <div className={css.tooltip} ref={this.overlayRef} onMouseLeave={()=>this.hide()} aria-hidden data-test-tooltip>
             {text && (
               <div className={css.text} data-test-tooltip-text>
                 {text}