[EuiToolTip] Prevent from closing while moving to intial position

[thompsongl]

Summary

elastic/kibana#84652 highlights a bug in EuiToolTip where if the anchor is near the top-left corner of the screen and the tooltip width is large enough, the tooltip will encroach upon the current cursor position which causes the tooltip to close. The net effect is the appearance of a flickering tooltip as the open and close events fire cyclically.

I've been unable to reproduce in Codesandbox, so see modified docs example inside:

Steps:

1. Replace as below
2. "Make header fixed position"
3. Scroll to top (this is important)
4. Hover over the check icon in the breadcrumbs

Code:

In src-docs/src/views/header/header_stacked.js

Drop-in replacement:

import React, { useState, useEffect } from 'react';

import {
  EuiHeader,
  EuiHeaderLogo,
  EuiHeaderSectionItemButton,
  EuiSwitch,
  EuiSpacer,
  EuiAvatar,
  EuiIcon,
  EuiToolTip,
  EuiButtonIcon,
} from '../../../../src/components';

export default () => {
  const [isFixed, setIsFixed] = useState(false);

  const breadcrumbs = [
    {
      text: (
        <>
          Discover
          <EuiToolTip content="Results loaded in the background">
            <EuiButtonIcon
              color="success"
              aria-label="test"
              iconType="checkInCircleFilled"
            />
          </EuiToolTip>
        </>
      ),
      href: '#',
      onClick: (e) => {
        e.preventDefault();
      },
    },
    {
      text: 'Users',
    },
  ];

  /**
   * Docs Note: This additional class is needed only for docs to override the usually single header
   */
  useEffect(() => {
    if (isFixed) document.body.classList.add('euiBody--headerIsFixed--double');

    return () => {
      document.body.classList.remove('euiBody--headerIsFixed--double');
    };
  }, [isFixed]);

  const headers = (
    <>
      <EuiHeader
        theme="dark"
        position={isFixed ? 'fixed' : 'static'}
        sections={[
          {
            items: [
              <EuiHeaderLogo iconType="logoElastic">Elastic</EuiHeaderLogo>,
            ],
            borders: 'none',
          },
          {
            items: [
              <EuiHeaderSectionItemButton aria-label="Account menu">
                <EuiAvatar name="John Username" size="s" />
              </EuiHeaderSectionItemButton>,
            ],
            borders: 'none',
          },
        ]}
      />
      <EuiHeader
        position={isFixed ? 'fixed' : 'static'}
        sections={[
          {
            items: [
              <EuiHeaderSectionItemButton aria-label="Account menu">
                <EuiAvatar type="space" name="Default Space" size="s" />
              </EuiHeaderSectionItemButton>,
            ],
            breadcrumbs: breadcrumbs,
            borders: 'right',
          },
          {
            items: [
              <EuiHeaderSectionItemButton
                aria-label="News feed: Updates available"
                notification={true}>
                <EuiIcon type="cheer" size="m" />
              </EuiHeaderSectionItemButton>,
            ],
            borders: 'none',
          },
        ]}
      />
    </>
  );

  return (
    <>
      <EuiSwitch
        label={'Make header fixed position'}
        checked={isFixed}
        onChange={(e) => setIsFixed(e.target.checked)}
      />
      <EuiSpacer />
      {headers}
    </>
  );
};

Solution is to mark the tooltip visible: hidden; like is done with opacity during the positioning period. This prevents accidental mouse interaction that results in closing the tooltip. I could also see using pointer-events: 'none'; here, FWIW.

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked in Chrome, Safari, Edge, and Firefox
- [ ] Props have proper autodocs
- [ ] Added documentation

• Checked Code Sandbox works for the any docs examples

- [ ] Added or updated jest tests

• Checked for breaking changes and labeled appropriately

- [ ] Checked for accessibility including keyboard-only and screenreader modes

• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4327/

[cchaos]

👍 LGTM, I didn't see any ill effects including keyboard navigation. Tested in Chrome, FF and Safari. Don't forget a CL

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4327/