[EuiToolTip] Improve render performance

src/components/tool_tip/_tool_tip.scss

@@ -4,15 +4,10 @@
 
 .euiToolTip {
   @include euiToolTipStyle;
-  @include euiToolTipAnimation('top');
+  @include euiToolTipAnimation('top', 0ms);
   position: absolute;
   opacity: 0;
 
-  // Animation delays
-  &.euiToolTip--delayLong {
-    animation-delay: $euiAnimSpeedNormal * 5;
-  }
-
   // Custom sizing
   $arrowSize: $euiSizeM;
   $arrowPlusSize: (($arrowSize/2) + 1px) * -1; /* 1 */

src/components/tool_tip/tool_tip.test.tsx

@@ -23,6 +23,7 @@ import {
   requiredProps,
   findTestSubject,
   takeMountedSnapshot,
+  sleep,
 } from '../../test';
 import { EuiToolTip } from './tool_tip';
 
@@ -41,7 +42,7 @@ describe('EuiToolTip', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('shows tooltip on focus', () => {
+  test('shows tooltip on focus', async () => {
     const component = mount(
       <EuiToolTip title="title" id="id" content="content" {...requiredProps}>
         <button data-test-subj="trigger">Trigger</button>
@@ -50,6 +51,7 @@ describe('EuiToolTip', () => {
 
     const trigger = findTestSubject(component, 'trigger');
     trigger.simulate('focus');
+    await sleep(260); // wait for showToolTip setTimout
     expect(takeMountedSnapshot(component)).toMatchSnapshot();
   });
 });

src/components/tool_tip/tool_tip.tsx

@@ -32,6 +32,7 @@ import { keysOf } from '../common';
 import { EuiPortal } from '../portal';
 import { EuiToolTipPopover } from './tool_tip_popover';
 import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
+import { enqueueStateChange } from '../../services/react';
 
 import { EuiResizeObserver } from '../observer/resize_observer';
 
@@ -53,6 +54,11 @@ const delayToClassNameMap: { [key in ToolTipDelay]: string | null } = {
   long: 'euiToolTip--delayLong',
 };
 
+const delayToMsMap: { [key in ToolTipDelay]: number } = {
+  regular: 250,
+  long: 250 * 5,
+};
+
 export const DELAY = keysOf(delayToClassNameMap);
 
 interface ToolTipStyles {
@@ -126,6 +132,7 @@ export class EuiToolTip extends Component<Props, State> {
   _isMounted = false;
   anchor: null | HTMLElement = null;
   popover: null | HTMLElement = null;
+  private timeoutId?: ReturnType<typeof setTimeout>;
 
   state: State = {
     visible: false,
@@ -140,7 +147,14 @@ export class EuiToolTip extends Component<Props, State> {
     delay: 'regular',
   };
 
+  clearAnimationTimeout = () => {
+    if (this.timeoutId) {
+      this.timeoutId = clearTimeout(this.timeoutId) as undefined;
+    }
+  };
+
   componentDidMount() {
+    this.clearAnimationTimeout();
     this._isMounted = true;
   }
 
@@ -184,7 +198,11 @@ export class EuiToolTip extends Component<Props, State> {
   };
 
   showToolTip = () => {
-    this.setState({ visible: true });
+    if (!this.timeoutId) {
+      this.timeoutId = setTimeout(() => {
+        enqueueStateChange(() => this.setState({ visible: true }));
+      }, delayToMsMap[this.props.delay]);
+    }
   };
 
   positionToolTip = () => {
@@ -232,8 +250,9 @@ export class EuiToolTip extends Component<Props, State> {
   };
 
   hideToolTip = () => {
+    this.clearAnimationTimeout();
     if (this._isMounted) {
-      this.setState({ visible: false });
+      enqueueStateChange(() => this.setState({ visible: false }));
     }
   };
 

src/components/tool_tip/tool_tip_popover.tsx

@@ -23,7 +23,7 @@ import { CommonProps } from '../common';
 
 type Props = CommonProps &
   Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
-    positionToolTip: (rect: ClientRect | DOMRect) => void;
+    positionToolTip: () => void;
     children?: ReactNode;
     title?: ReactNode;
     popoverRef?: (ref: HTMLDivElement) => void;
@@ -36,7 +36,7 @@ export class EuiToolTipPopover extends Component<Props> {
     requestAnimationFrame(() => {
       // Because of this delay, sometimes `positionToolTip` becomes unavailable.
       if (this.popover) {
-        this.props.positionToolTip(this.popover.getBoundingClientRect());
+        this.props.positionToolTip();
       }
     });
   };
@@ -50,8 +50,6 @@ export class EuiToolTipPopover extends Component<Props> {
 
   componentDidMount() {
     document.body.classList.add('euiBody-hasPortalContent');
-
-    this.updateDimensions();
     window.addEventListener('resize', this.updateDimensions);
   }
 

src/global_styling/mixins/_tool_tip.scss

@@ -24,5 +24,5 @@
 }
 
 @mixin euiToolTipAnimation($side: 'top', $delay: $euiAnimSpeedNormal) {
-  animation: #{map-get($euiTooltipAnimations, $side)} $euiAnimSpeedSlow ease-out $euiAnimSpeedNormal forwards;
+  animation: #{map-get($euiTooltipAnimations, $side)} $euiAnimSpeedSlow ease-out $delay forwards;
 }