[EuiToolTip] Refactor to a functional component, memoize style and improve tests

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap

@@ -34,7 +34,6 @@ exports[`EuiCollapsedNavButton renders a tooltip around the icon button 1`] = `
       class="euiToolTipPopover euiToolTip emotion-euiToolTip-left-euiCollapsedNavItemTooltip-left"
       data-position="left"
       id="generated-id"
-      position="left"
       role="tooltip"
       style="top: -10px; left: -16px;"
     >

packages/eui/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap

@@ -117,7 +117,6 @@ exports[`EuiContextMenuItem tooltip behavior 1`] = `
       class="euiToolTipPopover euiToolTip emotion-euiToolTip-top"
       data-position="top"
       id="generated-id"
-      position="top"
       role="tooltip"
       style="top: -16px; left: -10px;"
     >

packages/eui/src/components/filter_group/filter_select_item.test.tsx

@@ -7,7 +7,11 @@
  */
 
 import React from 'react';
-import { render } from '../../test/rtl';
+import {
+  render,
+  waitForEuiToolTipVisible,
+  waitForEuiToolTipHidden,
+} from '../../test/rtl';
 import { requiredProps } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
@@ -21,4 +25,57 @@ describe('EuiFilterSelectItem', () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  describe('tooltip behavior', () => {
+    const tooltipProps = {
+      toolTipContent: 'Filter item tooltip',
+      toolTipProps: { 'data-test-subj': 'filterItemToolTip' },
+    };
+
+    // `toggleToolTip` is called in `componentDidUpdate`; on initial mount `tooltipRef.current`
+    // is null because `EuiToolTip` hasn't committed its ref yet, so a re-render is required
+    // to trigger `showToolTip`/`hideToolTip`.
+    it('shows tooltip when `isFocused` becomes true', async () => {
+      const { rerender, getByTestSubject } = render(
+        <EuiFilterSelectItem {...tooltipProps} isFocused={false}>
+          <span>Item</span>
+        </EuiFilterSelectItem>
+      );
+
+      rerender(
+        <EuiFilterSelectItem {...tooltipProps} isFocused={true}>
+          <span>Item</span>
+        </EuiFilterSelectItem>
+      );
+
+      await waitForEuiToolTipVisible();
+      expect(getByTestSubject('filterItemToolTip')).toBeInTheDocument();
+    });
+
+    it('hides tooltip when `isFocused` becomes false', async () => {
+      const { rerender, queryByRole } = render(
+        <EuiFilterSelectItem {...tooltipProps} isFocused={false}>
+          <span>Item</span>
+        </EuiFilterSelectItem>
+      );
+
+      rerender(
+        <EuiFilterSelectItem {...tooltipProps} isFocused={true}>
+          <span>Item</span>
+        </EuiFilterSelectItem>
+      );
+
+      await waitForEuiToolTipVisible();
+      expect(queryByRole('tooltip')).toBeInTheDocument();
+
+      rerender(
+        <EuiFilterSelectItem {...tooltipProps} isFocused={false}>
+          <span>Item</span>
+        </EuiFilterSelectItem>
+      );
+
+      await waitForEuiToolTipHidden();
+      expect(queryByRole('tooltip')).not.toBeInTheDocument();
+    });
+  });
 });

packages/eui/src/components/filter_group/filter_select_item.tsx

@@ -14,6 +14,7 @@ import { CommonProps } from '../common';
 
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiToolTip } from '../tool_tip';
+import type { EuiToolTipRef } from '../tool_tip';
 import { EuiIcon } from '../icon';
 import { EuiComboBoxOptionOption } from '../combo_box';
 
@@ -62,7 +63,7 @@ export class EuiFilterSelectItemClass extends Component<
   };
 
   buttonRef: HTMLButtonElement | null = null;
-  tooltipRef = createRef<EuiToolTip>();
+  tooltipRef = createRef<EuiToolTipRef>();
 
   state = {
     hasFocus: false,

packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap

@@ -547,7 +547,6 @@ exports[`EuiSelectableListItem props tooltip behavior on mouseover 1`] = `
       data-position="top"
       data-test-subj="listItemToolTip"
       id="generated-id"
-      position="top"
       role="tooltip"
       style="top: -16px; left: -10px;"
     >
@@ -628,7 +627,6 @@ exports[`EuiSelectableListItem props tooltip behavior when isFocused 1`] = `
       data-position="top"
       data-test-subj="listItemToolTip"
       id="generated-id"
-      position="top"
       role="tooltip"
       style="top: -16px; left: -10px;"
     >

packages/eui/src/components/selectable/selectable_list/selectable_list_item.tsx

@@ -23,6 +23,7 @@ import { EuiIcon, IconColor, IconType } from '../../icon';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiBadge, EuiBadgeProps } from '../../badge';
 import { EuiToolTip } from '../../tool_tip';
+import type { EuiToolTipRef } from '../../tool_tip';
 
 import type {
   EuiSelectableOption,
@@ -358,7 +359,7 @@ export const EuiSelectableListItem: FunctionComponent<
   }, [role, checked]);
 
   const hasToolTip = !!toolTipContent && !disabled;
-  const [tooltipRef, setTooltipRef] = useState<EuiToolTip | null>(null); // Needs to be state and not a ref to trigger useEffect
+  const [tooltipRef, setTooltipRef] = useState<EuiToolTipRef | null>(null); // Needs to be state and not a ref to trigger useEffect
   const [ariaDescribedBy, setAriaDescribedBy] = useState(_ariaDescribedBy);
 
   // Manually trigger the tooltip on keyboard focus
@@ -375,7 +376,7 @@ export const EuiSelectableListItem: FunctionComponent<
   // Manually set the `aria-describedby` id on the <li> wrapper
   useEffect(() => {
     if (tooltipRef) {
-      const tooltipId = tooltipRef.state.id;
+      const tooltipId = tooltipRef.id;
       setAriaDescribedBy(classNames(tooltipId, _ariaDescribedBy));
     }
   }, [tooltipRef, _ariaDescribedBy]);

packages/eui/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap

@@ -13,46 +13,3 @@ exports[`EuiIconTip is rendered 1`] = `
   </span>
 </span>
 `;
-
-exports[`EuiIconTip props color is rendered as the icon color 1`] = `
-<span
-  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-  id="id-wrapper"
->
-  <span
-    color="warning"
-    data-euiicon-type="question"
-    tabindex="0"
-  >
-    Info
-  </span>
-</span>
-`;
-
-exports[`EuiIconTip props size is rendered as the icon size 1`] = `
-<span
-  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-  id="id-wrapper"
->
-  <span
-    data-euiicon-type="question"
-    tabindex="0"
-  >
-    Info
-  </span>
-</span>
-`;
-
-exports[`EuiIconTip props type is rendered as the icon 1`] = `
-<span
-  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-  id="id-wrapper"
->
-  <span
-    data-euiicon-type="warning"
-    tabindex="0"
-  >
-    Info
-  </span>
-</span>
-`;

packages/eui/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap

@@ -1,36 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiToolTip anchor props are rendered 1`] = `
-<body
-  class=""
->
-  <div>
-    <span
-      class="euiToolTipAnchor customAnchorClass1 emotion-euiToolTipAnchor-inlineBlock"
-      data-test-subj="DTS"
-      id="id-wrapper"
-    >
-      <button>
-        Trigger
-      </button>
-    </span>
-  </div>
-</body>
-`;
-
-exports[`EuiToolTip display prop renders block 1`] = `
-<div>
-  <span
-    class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
-    id="id-wrapper"
-  >
-    <button>
-      Trigger
-    </button>
-  </span>
-</div>
-`;
-
 exports[`EuiToolTip is rendered 1`] = `
 <body
   class=""
@@ -47,93 +16,3 @@ exports[`EuiToolTip is rendered 1`] = `
   </div>
 </body>
 `;
-
-exports[`EuiToolTip shows tooltip on mouseover and focus 1`] = `
-<body
-  class="euiBody-hasPortalContent"
->
-  <div>
-    <span
-      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-      id="id-wrapper"
-    >
-      <button
-        aria-describedby="id"
-        data-test-subj="trigger"
-      >
-        Trigger
-      </button>
-    </span>
-  </div>
-  <div
-    data-euiportal="true"
-  >
-    <div
-      aria-label="aria-label"
-      class="euiToolTipPopover euiToolTip testClass1 testClass2 emotion-euiToolTip-top-euiTestCss"
-      data-position="top"
-      data-test-subj="test subject string"
-      id="id"
-      position="top"
-      role="tooltip"
-      style="top: -16px; left: -10px;"
-    >
-      <div
-        class="euiToolTip__title emotion-euiToolTip__title"
-      >
-        title
-      </div>
-      <div
-        class="euiToolTip__arrow emotion-euiToolTip__arrow-top"
-        style="left: 3px; top: 100%;"
-      />
-      <div>
-        content
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`EuiToolTip uses custom offset prop value 1`] = `
-<body
-  class="euiBody-hasPortalContent"
->
-  <div>
-    <span
-      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-      id="generated-id-wrapper"
-    >
-      <button
-        aria-describedby="generated-id"
-        data-test-subj="trigger"
-      >
-        Trigger
-      </button>
-    </span>
-  </div>
-  <div
-    data-euiportal="true"
-  >
-    <div
-      aria-label="aria-label"
-      class="euiToolTipPopover euiToolTip testClass1 testClass2 emotion-euiToolTip-top-euiTestCss"
-      data-position="top"
-      data-test-subj="test subject string"
-      id="generated-id"
-      offset="32"
-      position="top"
-      role="tooltip"
-      style="top: -32px; left: -10px;"
-    >
-      <div
-        class="euiToolTip__arrow emotion-euiToolTip__arrow-top"
-        style="left: 3px; top: 100%;"
-      />
-      <div>
-        content
-      </div>
-    </div>
-  </div>
-</body>
-`;