Add inline prop to EuiToolTip. Default to using a div wrapper around …

…the anchor. Fix mouseout logic.
elastic · Mar 22, 2018 · dda04d4 · dda04d4
1 parent f47e4ec
commit dda04d4
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,10 +2,15 @@
 
 **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))
 
+**Breaking changes**
+
+- `EuiToolTip` now defaults to using a `div` instead of a `span` to wrap the anchor. Specify
+`inline={true}` to use a `span`. ([#564](https://github.com/elastic/eui/pull/564))
+
 # [`0.0.33`](https://github.com/elastic/eui/tree/v0.0.33)
 
 - Added initial sorting option to `EuiInMemoryTable` ([#547](https://github.com/elastic/eui/pull/547))

diff --git a/src-docs/src/views/tool_tip/tool_tip.js b/src-docs/src/views/tool_tip/tool_tip.js
@@ -15,14 +15,19 @@ export default () => (
     <EuiText>
       <p>
         This tooltip appears on the{' '}
-        <EuiToolTip position="top" content="Here is some tooltip text">
+        <EuiToolTip
+          inline
+          position="top"
+          content="Here is some tooltip text"
+        >
           <EuiLink href="#">top</EuiLink>
         </EuiToolTip>
       </p>
 
       <p>
         This tooltip appears on the{' '}
         <EuiToolTip
+          inline
           position="left"
           title="Tooltip titles are optional"
           content="Here is some tooltip text. Lets add some more content to see how it wraps."
@@ -34,14 +39,22 @@ export default () => (
 
       <p>
         This tooltip appears on the{' '}
-        <EuiToolTip position="right" content="Here is some tooltip text">
+        <EuiToolTip
+          inline
+          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
+          inline
+          position="bottom"
+          content="Here is some tooltip text"
+        >
           <EuiIcon tabIndex="0" type="alert" title="Icon with tooltip" />
         </EuiToolTip>
       </p>

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>
+<div
+  class="euiToolTipAnchor"
+>
   <svg
     aria-describedby="id"
     aria-label="aria-label"
@@ -19,11 +21,13 @@ exports[`EuiIconTip is rendered 1`] = `
       d="M7.086 10.169c.01-.534.077-.955.2-1.264.123-.31.375-.653.755-1.03l.969-.907c.414-.426.621-.883.621-1.372 0-.47-.135-.84-.407-1.106-.27-.267-.665-.4-1.183-.4-.503 0-.908.12-1.214.363-.305.242-.458.567-.458.975H5c.01-.727.295-1.313.855-1.759C6.415 3.223 7.143 3 8.04 3c.932 0 1.658.228 2.178.683.52.455.781 1.079.781 1.872 0 .785-.4 1.558-1.199 2.32l-.806.727c-.36.363-.54.885-.54 1.567H7.086zM7.027 12.3c0-.202.068-.371.204-.508.135-.137.336-.205.603-.205.266 0 .468.068.606.205a.686.686 0 0 1 .207.508.664.664 0 0 1-.207.5c-.138.133-.34.199-.606.199-.267 0-.468-.066-.603-.198a.67.67 0 0 1-.204-.501z"
     />
   </svg>
-</span>
+</div>
 `;
 
 exports[`EuiIconTip props type is rendered as the icon 1`] = `
-<span>
+<div
+  class="euiToolTipAnchor"
+>
   <svg
     aria-describedby="id"
     aria-label="Info"
@@ -45,5 +49,5 @@ exports[`EuiIconTip props type is rendered as the icon 1`] = `
       />
     </g>
   </svg>
-</span>
+</div>
 `;
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,11 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiToolTip is rendered 1`] = `
-<span>
+<div
+  class="euiToolTipAnchor"
+>
   <button
     aria-describedby="id"
   >
     Trigger
   </button>
-</span>
+</div>
 `;
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();
+      }
     }
   };
 
@@ -91,6 +90,7 @@ export class EuiToolTip extends Component {
       className,
       content,
       title,
+      inline,
       ...rest
     } = this.props;
 
@@ -119,21 +119,26 @@ export class EuiToolTip extends Component {
       );
     }
 
-    const trigger = (
-      <span ref={anchor => this.anchor = anchor}>
+    const AnchorElement = inline ? 'span' : 'div';
+
+    const anchor = (
+      <AnchorElement
+        ref={anchor => this.anchor = anchor}
+        className="euiToolTipAnchor"
+      >
         {cloneElement(children, {
           onFocus: this.showToolTip,
           onBlur: this.hideToolTip,
           'aria-describedby': this.state.id,
           onMouseOver: this.showToolTip,
           onMouseOut: this.onMouseOut
         })}
-      </span>
+      </AnchorElement>
     );
 
     return (
       <Fragment>
-        {trigger}
+        {anchor}
         {tooltip}
       </Fragment>
     );
@@ -169,6 +174,11 @@ EuiToolTip.propTypes = {
    * Unless you provide one, this will be randomly generated.
    */
   id: PropTypes.string,
+
+  /**
+   * Use span instead of div.
+   */
+  inline: PropTypes.bool,
 };
 
 EuiToolTip.defaultProps = {