Added a delay option to tooltip

and wrapped action items with tooltip **if enabled and has description**
elastic · Sep 6, 2018 · c179b97 · c179b97
1 parent c0afae7
commit c179b97
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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',
 };