Disable pointer-events on disabled children within EuiTooltip (#1157)

* Disable pointer-events on disabled children within tooltip

* changelog

CHANGELOG.md

@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed `makeHighContrastColor` sass mixin to properly output an accessible color contrast. ([#1158](https://github.com/elastic/eui/pull/1158))
+- Fixed `EuiTooltip` to interact correctly when the anchor is a disabled form element ([#1158](https://github.com/elastic/eui/pull/1158))
 
 ## [`3.8.0`](https://github.com/elastic/eui/tree/v3.8.0)
 

src-docs/src/views/context_menu/context_menu.js

@@ -107,6 +107,8 @@ export default class extends Component {
       }, {
         name: 'Disabled option',
         icon: 'user',
+        toolTipContent: 'For reasons, this item is disabled',
+        toolTipPosition: 'right',
         disabled: true,
         onClick: () => { this.closePopover(); window.alert('Disabled option'); },
       }],

src/components/tool_tip/_tool_tip.scss

@@ -68,6 +68,14 @@
 
 .euiToolTipAnchor {
   display: inline-block;
+
+  // disabled elements don't fire mouse events which means leaving a disabled element
+  // wouldn't trigger the onMouseOut and hide the tooltip; disabling pointer events
+  // on disabled elements means any mouse events remain handled by parent elements
+  // https://jakearchibald.com/2017/events-and-disabled-form-fields/
+  > *[disabled] {
+    pointer-events: none;
+  }
 }
 
 // Keyframes to animate in the tooltip.

src/components/tool_tip/tool_tip.js

@@ -197,6 +197,8 @@ export class EuiToolTip extends Component {
       <span
         ref={anchor => this.anchor = anchor}
         className={anchorClasses}
+        onMouseOver={this.showToolTip}
+        onMouseOut={this.onMouseOut}
       >
         {/**
           * We apply onFocus, onBlur, etc to the children element because that's the element
@@ -209,8 +211,6 @@ export class EuiToolTip extends Component {
           onFocus: this.showToolTip,
           onBlur: this.hideToolTip,
           'aria-describedby': this.state.id,
-          onMouseOver: this.showToolTip,
-          onMouseOut: this.onMouseOut
         })}
       </span>
     );