[EuiToolTip] Add repositionOnScroll prop

src-docs/src/views/tool_tip/tool_tip_example.js

@@ -36,6 +36,9 @@ const tooltipSnippet = [
 import ToolTipComponent from './tool_tip_components';
 const toolTipComponentSource = require('!!raw-loader!./tool_tip_components');
 
+import ToolTipFixed from './tool_tip_fixed';
+const toolTipFixedSource = require('!!raw-loader!./tool_tip_fixed');
+
 import IconTip from './icon_tip';
 const infoTipSource = require('!!raw-loader!./icon_tip');
 const infoTipSnippet = `<EuiIconTip
@@ -146,6 +149,25 @@ export const ToolTipExample = {
       props: { EuiToolTip },
       demo: <ToolTipComponent />,
     },
+    {
+      title: 'Tooltip on a fixed element',
+      text: (
+        <p>
+          Tooltips even work on <EuiCode>position: fixed;</EuiCode> elements.
+          Add the <EuiCode>repositionOnScroll</EuiCode> boolean prop to ensure
+          the tooltip realigns to the fixed anchor on scroll.
+        </p>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: toolTipFixedSource,
+        },
+      ],
+
+      props: { EuiToolTip },
+      demo: <ToolTipFixed />,
+    },
     {
       title: 'IconTip',
       text: (

src-docs/src/views/tool_tip/tool_tip_fixed.tsx

@@ -0,0 +1,38 @@
+import React, { useState, useRef } from 'react';
+
+import { EuiToolTip, EuiButton } from '../../../../src';
+
+export default () => {
+  const toggleRef = useRef<HTMLButtonElement | null>(null);
+  const fixedRef = useRef<HTMLButtonElement | null>(null);
+  const [isExampleShown, setIsExampleShown] = useState(false);
+  const toggleExample = () => {
+    setIsExampleShown((isExampleShown) => {
+      requestAnimationFrame(() => {
+        isExampleShown ? toggleRef.current?.focus() : fixedRef.current?.focus();
+      });
+      return !isExampleShown;
+    });
+  };
+
+  return (
+    <>
+      <EuiButton onClick={toggleExample} buttonRef={toggleRef}>
+        Toggle fixed example
+      </EuiButton>
+      {isExampleShown && (
+        <div style={{ position: 'fixed', bottom: 50, right: 50, zIndex: 10 }}>
+          <EuiToolTip
+            position="top"
+            content="This tooltip text scrolls with the fixed example button."
+            repositionOnScroll={true}
+          >
+            <EuiButton fill buttonRef={fixedRef} onClick={toggleExample}>
+              Toggle fixed example
+            </EuiButton>
+          </EuiToolTip>
+        </div>
+      )}
+    </>
+  );
+};

src/components/tool_tip/tool_tip.test.tsx

@@ -122,4 +122,29 @@ describe('EuiToolTip', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  test('repositionOnScroll', () => {
+    const addEventSpy = jest.spyOn(window, 'addEventListener');
+    const removeEventSpy = jest.spyOn(window, 'removeEventListener');
+    const repositionFn = expect.any(Function);
+
+    const { rerender, unmount } = render(
+      <EuiToolTip content="content">
+        <button data-test-subj="trigger">Trigger</button>
+      </EuiToolTip>
+    );
+    expect(addEventSpy).not.toHaveBeenCalledWith('scroll', expect.anything());
+
+    // Should add a scroll event listener on mount and on update
+    rerender(
+      <EuiToolTip content="content" repositionOnScroll={true}>
+        <button data-test-subj="trigger">Trigger</button>
+      </EuiToolTip>
+    );
+    expect(addEventSpy).toHaveBeenCalledWith('scroll', repositionFn, true);
+
+    // Should remove the scroll event listener on unmount
+    unmount();
+    expect(removeEventSpy).toHaveBeenCalledWith('scroll', repositionFn, true);
+  });
 });

src/components/tool_tip/tool_tip.tsx

@@ -108,6 +108,13 @@ export interface EuiToolTipProps {
    * Suggested position. If there is not enough room for it this will be changed.
    */
   position: ToolTipPositions;
+  /**
+   * When `true`, the tooltip's position is re-calculated when the user
+   * scrolls. This supports having fixed-position tooltip anchors.
+   *
+   * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+   */
+  repositionOnScroll?: boolean;
 
   /**
    * If supplied, called when mouse movement causes the tool tip to be
@@ -154,17 +161,30 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
 
   componentDidMount() {
     this._isMounted = true;
+    if (this.props.repositionOnScroll) {
+      window.addEventListener('scroll', this.positionToolTip, true);
+    }
   }
 
   componentWillUnmount() {
     this.clearAnimationTimeout();
     this._isMounted = false;
+    window.removeEventListener('scroll', this.positionToolTip, true);
   }
 
   componentDidUpdate(prevProps: EuiToolTipProps, prevState: State) {
     if (prevState.visible === false && this.state.visible === true) {
       requestAnimationFrame(this.testAnchor);
     }
+
+    // update scroll listener
+    if (prevProps.repositionOnScroll !== this.props.repositionOnScroll) {
+      if (this.props.repositionOnScroll) {
+        window.addEventListener('scroll', this.positionToolTip, true);
+      } else {
+        window.removeEventListener('scroll', this.positionToolTip, true);
+      }
+    }
   }
 
   testAnchor = () => {
@@ -293,6 +313,7 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
       title,
       delay,
       display,
+      repositionOnScroll,
       ...rest
     } = this.props;
 

upcoming_changelogs/6515.md

@@ -0,0 +1 @@
+- Added the `repositionOnScroll` prop to `EuiToolTip`