From c179b970e1303d9d5f7088a32b0ff368ab41c684 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 9 Aug 2018 15:08:30 -0400
Subject: [PATCH] Added a delay option to tooltip

and wrapped action items with tooltip **if enabled and has description**
---
 src-docs/src/views/tool_tip/tool_tip.js       | 10 +++++
 .../basic_table/collapsed_item_actions.js     | 11 +++++-
 .../basic_table/default_item_action.js        | 39 +++++++++++--------
 src/components/tool_tip/_tool_tip.scss        |  5 +++
 src/components/tool_tip/tool_tip.js           | 15 +++++++
 5 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/src-docs/src/views/tool_tip/tool_tip.js b/src-docs/src/views/tool_tip/tool_tip.js
index 58f4fbff504..2e8d25501cf 100644
--- a/src-docs/src/views/tool_tip/tool_tip.js
+++ b/src-docs/src/views/tool_tip/tool_tip.js
@@ -45,6 +45,16 @@ export default () => (
         </EuiToolTip>
       </p>
 
+      <p>
+        This tooltip has a long delay because it might be in a repeatable component{' '}
+        <EuiToolTip
+          delay="long"
+          content="Here is some tooltip text"
+        >
+          <EuiLink href="#">wink</EuiLink>
+        </EuiToolTip>
+      </p>
+
       <p>
         This tooltip appears on the bottom of this icon:{' '}
         <EuiToolTip
diff --git a/src/components/basic_table/collapsed_item_actions.js b/src/components/basic_table/collapsed_item_actions.js
index 678b4ed04e0..5d368d469cf 100644
--- a/src/components/basic_table/collapsed_item_actions.js
+++ b/src/components/basic_table/collapsed_item_actions.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { EuiContextMenuItem, EuiContextMenuPanel } from '../context_menu';
 import { EuiPopover } from '../popover';
 import { EuiButtonIcon } from '../button';
+import { EuiToolTip } from '../tool_tip';
 
 export class CollapsedItemActions extends Component {
 
@@ -89,7 +90,7 @@ export class CollapsedItemActions extends Component {
     const popoverButton = (
       <EuiButtonIcon
         className={className}
-        aria-label="actions"
+        aria-label="All actions"
         iconType="boxesHorizontal"
         color="text"
         isDisabled={allDisabled}
@@ -98,13 +99,19 @@ export class CollapsedItemActions extends Component {
       />
     );
 
+    const withTooltip = !allDisabled && (
+      <EuiToolTip content="All actions" delay="long">
+        {popoverButton}
+      </EuiToolTip>
+    );
+
     return (
       <EuiPopover
         className={className}
         popoverRef={this.registerPopoverDiv}
         id={`${itemId}-actions`}
         isOpen={isOpen}
-        button={popoverButton}
+        button={withTooltip || popoverButton}
         closePopover={this.closePopover}
         panelPaddingSize="none"
         anchorPosition="leftCenter"
diff --git a/src/components/basic_table/default_item_action.js b/src/components/basic_table/default_item_action.js
index 212f4dd4e2c..56f4a490c5b 100644
--- a/src/components/basic_table/default_item_action.js
+++ b/src/components/basic_table/default_item_action.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { isString } from '../../services/predicate';
 import { EuiButton, EuiButtonIcon } from '../button';
+import { EuiToolTip } from '../tool_tip';
 
 const defaults = {
   color: 'primary'
@@ -21,38 +22,44 @@ export class DefaultItemAction extends Component {
     const onClick = () => action.onClick(item);
     const color = this.resolveActionColor();
     const icon = this.resolveActionIcon();
+
+    let button;
     if (action.type === 'icon') {
       if (!icon) {
         throw new Error(`Cannot render item action [${action.name}]. It is configured to render as an icon but no
         icon is provided. Make sure to set the 'icon' property of the action`);
       }
-      return (
+      button = (
         <EuiButtonIcon
           className={className}
           aria-label={action.name}
           isDisabled={!enabled}
           color={color}
           iconType={icon}
-          title={action.description}
           onClick={onClick}
         />
       );
+    } else {
+      button = (
+        <EuiButton
+          className={className}
+          size="s"
+          isDisabled={!enabled}
+          color={color}
+          iconType={icon}
+          fill={false}
+          onClick={onClick}
+        >
+          {action.name}
+        </EuiButton>
+      );
     }
 
-    return (
-      <EuiButton
-        className={className}
-        size="s"
-        isDisabled={!enabled}
-        color={color}
-        iconType={icon}
-        fill={false}
-        title={action.description}
-        onClick={onClick}
-      >
-        {action.name}
-      </EuiButton>
-    );
+    return (enabled && action.description) ? (
+      <EuiToolTip content={action.description} delay="long">
+        {button}
+      </EuiToolTip>
+    ) : button;
   }
 
   resolveActionIcon() {
diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss
index 100e7818c5e..3d882c51fc4 100644
--- a/src/components/tool_tip/_tool_tip.scss
+++ b/src/components/tool_tip/_tool_tip.scss
@@ -16,6 +16,11 @@
   animation: euiToolTipTop $euiAnimSpeedSlow ease-out $euiAnimSpeedNormal forwards;
   z-index: $euiZLevel9;
 
+  // Animation delays
+  &.euiToolTip--delayLong {
+    animation-delay: $euiAnimSpeedNormal * 5;
+  }
+
   // Custom sizing
   $arrowSize: $euiSizeM;
   $arrowPlusSize: (($arrowSize/2) + 1px) * -1; /* 1 */
diff --git a/src/components/tool_tip/tool_tip.js b/src/components/tool_tip/tool_tip.js
index ed9ae1e20d8..78183f23d22 100644
--- a/src/components/tool_tip/tool_tip.js
+++ b/src/components/tool_tip/tool_tip.js
@@ -22,6 +22,13 @@ const positionsToClassNameMap = {
 
 export const POSITIONS = Object.keys(positionsToClassNameMap);
 
+const delayToClassNameMap = {
+  regular: null,
+  long: 'euiToolTip--delayLong',
+};
+
+export const DELAY = Object.keys(delayToClassNameMap);
+
 const DEFAULT_TOOLTIP_STYLES = {
   // position the tooltip content near the top-left
   // corner of the window so it can't create scrollbars
@@ -161,6 +168,7 @@ export class EuiToolTip extends Component {
       anchorClassName,
       content,
       title,
+      delay,
       ...rest
     } = this.props;
 
@@ -169,6 +177,7 @@ export class EuiToolTip extends Component {
     const classes = classNames(
       'euiToolTip',
       positionsToClassNameMap[this.state.calculatedPosition],
+      delayToClassNameMap[delay],
       className
     );
 
@@ -254,6 +263,11 @@ EuiToolTip.propTypes = {
    */
   position: PropTypes.oneOf(POSITIONS),
 
+  /**
+   * Delay before showing tooltip. Good for repeatable items.
+   */
+  delay: PropTypes.oneOf(DELAY),
+
   /**
    * Passes onto the tooltip itself, not the trigger.
    */
@@ -267,4 +281,5 @@ EuiToolTip.propTypes = {
 
 EuiToolTip.defaultProps = {
   position: 'top',
+  delay: 'regular',
 };