Fix EuiToolTip mouseout logic. (#564)

elastic · Mar 22, 2018 · 670da9f · 670da9f
1 parent 8c3c08f
commit 670da9f
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,9 @@
 
 **Bug fixes**
 
-- Fixed `EuiToolTip` bug which caused the tooltip to hide when moving the mouse around inside of the trigger element ([#557](https://github.com/elastic/eui/pull/557))
+- Fixed `EuiToolTip` bug which caused the tooltip to hide when moving the mouse around inside of the trigger element ([#557](https://github.com/elastic/eui/pull/557), [#564](https://github.com/elastic/eui/pull/564))
 - Added a `buttonColor` prop to `EuiConfirmModal` ([#546](https://github.com/elastic/eui/pull/546))
-- Added ‘baseline’ as option to `EuiFlexGroup`'s `alignItems` prop ([#546](https://github.com/elastic/eui/pull/546))
+- Added 'baseline' as option to `EuiFlexGroup`'s `alignItems` prop ([#546](https://github.com/elastic/eui/pull/546))
 - Fixed a bug where `EuiButtonEmpty` would offer a white background on hover when it was disabled, even when there was no such background transition on hover when the buttons are not disabled ([#561](https://github.com/elastic/eui/pull/561))
 
 # [`0.0.33`](https://github.com/elastic/eui/tree/v0.0.33)

diff --git a/src-docs/src/views/filter_group/filter_group_example.js b/src-docs/src/views/filter_group/filter_group_example.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { renderToHtml } from '../../services';
 
@@ -22,7 +22,7 @@ const filterGroupHtml = renderToHtml(FilterGroup);
 export const FilterGroupExample = {
   title: 'Filter Group',
   intro: (
-    <div>
+    <Fragment>
       <EuiCallOut
         title="Demo of visual pattern only"
         color="warning"
@@ -37,7 +37,7 @@ export const FilterGroupExample = {
       </EuiCallOut>
 
       <EuiSpacer size="l" />
-    </div>
+    </Fragment>
   ),
   sections: [{
     source: [{

diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { renderToHtml } from '../../services';
 
@@ -72,7 +72,7 @@ const flexGroupResonsiveHtml = renderToHtml(FlexGroupResponsive);
 export const FlexExample = {
   title: 'Flex',
   intro: (
-    <div>
+    <Fragment>
       <EuiCallOut
         title="Coloring and padding exist for examples only"
         color="warning"
@@ -85,7 +85,7 @@ export const FlexExample = {
       </EuiCallOut>
 
       <EuiSpacer size="l" />
-    </div>
+    </Fragment>
   ),
   sections: [{
     title: 'FlexGroup is for a single row layout',

diff --git a/src-docs/src/views/spacer/spacer_example.js b/src-docs/src/views/spacer/spacer_example.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { renderToHtml } from '../../services';
 
@@ -20,7 +20,7 @@ const spacerHtml = renderToHtml(Spacer);
 export const SpacerExample = {
   title: 'Spacer',
   intro: (
-    <div>
+    <Fragment>
       <EuiCallOut
         title="Try not to stuff these in loops"
         color="warning"
@@ -37,7 +37,7 @@ export const SpacerExample = {
       </EuiCallOut>
 
       <EuiSpacer size="l" />
-    </div>
+    </Fragment>
   ),
   sections: [{
     source: [{

diff --git a/src-docs/src/views/tool_tip/tool_tip.js b/src-docs/src/views/tool_tip/tool_tip.js
@@ -15,7 +15,10 @@ export default () => (
     <EuiText>
       <p>
         This tooltip appears on the{' '}
-        <EuiToolTip position="top" content="Here is some tooltip text">
+        <EuiToolTip
+          position="top"
+          content="Here is some tooltip text"
+        >
           <EuiLink href="#">top</EuiLink>
         </EuiToolTip>
       </p>
@@ -34,14 +37,20 @@ export default () => (
 
       <p>
         This tooltip appears on the{' '}
-        <EuiToolTip position="right" content="Here is some tooltip text">
+        <EuiToolTip
+          position="right"
+          content="Here is some tooltip text"
+        >
           <EuiLink href="#">right</EuiLink>
         </EuiToolTip>
       </p>
 
       <p>
         This tooltip appears on the bottom of this icon:{' '}
-        <EuiToolTip position="bottom" content="Here is some tooltip text">
+        <EuiToolTip
+          position="bottom"
+          content="Here is some tooltip text"
+        >
           <EuiIcon tabIndex="0" type="alert" title="Icon with tooltip" />
         </EuiToolTip>
       </p>

diff --git a/src-docs/src/views/tool_tip/tool_tip_example.js b/src-docs/src/views/tool_tip/tool_tip_example.js
@@ -7,9 +7,11 @@ import {
 } from '../../components';
 
 import {
+  EuiCallOut,
   EuiCode,
   EuiToolTip,
   EuiIconTip,
+  EuiSpacer,
 } from '../../../../src/components';
 
 import ToolTip from './tool_tip';
@@ -22,6 +24,20 @@ const infoTipHtml = renderToHtml(IconTip);
 
 export const ToolTipExample = {
   title: 'ToolTip',
+  intro: (
+    <Fragment>
+      <EuiCallOut
+        title="EuiToolTip only applies to inline elements"
+      >
+        <p>
+          EuiToolTip wraps its children in a span element, so if you pass in a block-level child
+          (e.g. a div) the resulting DOM will be in violation of the HTML5 spec.
+        </p>
+      </EuiCallOut>
+
+      <EuiSpacer size="l" />
+    </Fragment>
+  ),
   sections: [{
     source: [{
       type: GuideSectionTypes.JS,

diff --git a/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap b/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiIconTip is rendered 1`] = `
-<span>
+<span
+  class="euiToolTipAnchor"
+>
   <svg
     aria-describedby="id"
     aria-label="aria-label"
@@ -23,7 +25,9 @@ exports[`EuiIconTip is rendered 1`] = `
 `;
 
 exports[`EuiIconTip props type is rendered as the icon 1`] = `
-<span>
+<span
+  class="euiToolTipAnchor"
+>
   <svg
     aria-describedby="id"
     aria-label="Info"

diff --git a/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap b/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiToolTip is rendered 1`] = `
-<span>
+<span
+  class="euiToolTipAnchor"
+>
   <button
     aria-describedby="id"
   >

diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss
@@ -70,6 +70,9 @@
   }
 }
 
+.euiToolTipAnchor {
+  display: inline-block;
+}
 
 // Keyframes to animate in the tooltip.
 @keyframes euiToolTipTop {

diff --git a/src/components/tool_tip/tool_tip.js b/src/components/tool_tip/tool_tip.js
@@ -75,13 +75,12 @@ export class EuiToolTip extends Component {
   };
 
   onMouseOut = (e) => {
-    if (e.target !== e.currentTarget) {
-      // We've moused out of a child element, but we haven't yet left the root trigger element.
-      return;
-    }
-
-    if (!this.state.hasFocus) {
-      this.hideToolTip();
+    // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
+    // left the anchor for a non-child.
+    if (this.anchor === e.relatedTarget || !this.anchor.contains(e.relatedTarget)) {
+      if (!this.state.hasFocus) {
+        this.hideToolTip();
+      }
     }
   };
 
@@ -119,8 +118,11 @@ export class EuiToolTip extends Component {
       );
     }
 
-    const trigger = (
-      <span ref={anchor => this.anchor = anchor}>
+    const anchor = (
+      <span
+        ref={anchor => this.anchor = anchor}
+        className="euiToolTipAnchor"
+      >
         {cloneElement(children, {
           onFocus: this.showToolTip,
           onBlur: this.hideToolTip,
@@ -133,7 +135,7 @@ export class EuiToolTip extends Component {
 
     return (
       <Fragment>
-        {trigger}
+        {anchor}
         {tooltip}
       </Fragment>
     );