[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.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__/tool_tip.test.tsx.snap

@@ -74,7 +74,6 @@ exports[`EuiToolTip shows tooltip on mouseover and focus 1`] = `
       data-position="top"
       data-test-subj="test subject string"
       id="id"
-      position="top"
       role="tooltip"
       style="top: -16px; left: -10px;"
     >
@@ -121,8 +120,6 @@ exports[`EuiToolTip uses custom offset prop value 1`] = `
       data-position="top"
       data-test-subj="test subject string"
       id="generated-id"
-      offset="32"
-      position="top"
       role="tooltip"
       style="top: -32px; left: -10px;"
     >

packages/eui/src/components/tool_tip/index.ts

@@ -7,7 +7,7 @@
  */
 
 export type { ToolTipPositions } from './tool_tip_popover';
-export type { EuiToolTipProps } from './tool_tip';
+export type { EuiToolTipProps, EuiToolTipRef } from './tool_tip';
 export { EuiToolTip } from './tool_tip';
 
 export type { EuiIconTipProps } from './icon_tip';

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

@@ -18,6 +18,7 @@ import { requiredProps } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiToolTip } from './tool_tip';
+import type { EuiToolTipRef } from './tool_tip';
 
 describe('EuiToolTip', () => {
   shouldRenderCustomStyles(
@@ -185,7 +186,7 @@ describe('EuiToolTip', () => {
 
     test('showToolTip', async () => {
       const ConsumerToolTip = () => {
-        const toolTipRef = useRef<EuiToolTip>(null);
+        const toolTipRef = useRef<EuiToolTipRef>(null);
 
         const showToolTip = () => {
           toolTipRef.current?.showToolTip();
@@ -216,7 +217,7 @@ describe('EuiToolTip', () => {
       // focus is returned to toggling buttons with a tooltip, & said tooltip blocks UI
       // @see https://github.com/elastic/eui/issues/5883#issuecomment-1120908605 for example
       const ConsumerToolTip = () => {
-        const toolTipRef = useRef<EuiToolTip>(null);
+        const toolTipRef = useRef<EuiToolTipRef>(null);
 
         const hideToolTip = () => {
           toolTipRef.current?.hideToolTip();