[EuiTooltip] Revert "Remove tooltip focus on mousemove (#3335)" and force visibility while element is focused

CHANGELOG.md

@@ -1,6 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `37.3.1`.
+- Updated `EuiToolTip` to remain showing tooltip while child element is in focus ([#5066](https://github.com/elastic/eui/pull/5066))
+- Removed `children` from TypeScript definition in `EuiIconTip` ([#5066](https://github.com/elastic/eui/pull/5066))
+
+**Bug fixes**
+
+- Fixed location of default value of `EuiToolTip`'s `display` prop ([#5066](https://github.com/elastic/eui/pull/5066))
 
 ## [`37.3.1`](https://github.com/elastic/eui/tree/v37.3.1)
 

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

@@ -1,12 +1,13 @@
 import { PropTypes } from 'react-view';
-import { EuiToolTip } from '../../../../src/components/';
+import { EuiToolTip, EuiIconTip } from '../../../../src/components';
 import {
   propUtilityForPlayground,
   dummyFunction,
   simulateFunction,
+  iconValidator,
 } from '../../services/playground';
 
-export default () => {
+export const toolTipConfig = () => {
   const docgenInfo = Array.isArray(EuiToolTip.__docgenInfo)
     ? EuiToolTip.__docgenInfo[0]
     : EuiToolTip.__docgenInfo;
@@ -51,3 +52,44 @@ export default () => {
     },
   };
 };
+
+export const iconTipConfig = () => {
+  const docgenInfo = Array.isArray(EuiIconTip.__docgenInfo)
+    ? EuiIconTip.__docgenInfo[0]
+    : EuiIconTip.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.type = iconValidator(propsToUse.type);
+
+  propsToUse.title = {
+    ...propsToUse.title,
+    type: PropTypes.String,
+    value: 'Title',
+  };
+
+  propsToUse.content = {
+    ...propsToUse.content,
+    type: PropTypes.String,
+    value: 'Content',
+  };
+
+  propsToUse.onMouseOut = simulateFunction(propsToUse.onMouseOut);
+
+  return {
+    config: {
+      componentName: 'EuiIconTip',
+      props: propsToUse,
+      scope: {
+        EuiIconTip,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiIconTip'],
+        },
+      },
+      customProps: {
+        onMouseOut: dummyFunction,
+      },
+    },
+  };
+};

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

@@ -5,9 +5,7 @@ import {
   EuiToolTip,
   EuiLink,
   EuiText,
-  EuiFieldText,
-  EuiSpacer,
-  EuiButton,
+  EuiCode,
 } from '../../../../src/components';
 
 export default () => (
@@ -18,6 +16,7 @@ export default () => (
         <EuiToolTip position="top" content="Here is some tooltip text">
           <EuiLink href="#">top</EuiLink>
         </EuiToolTip>
+        .
       </p>
 
       <p>
@@ -37,14 +36,16 @@ export default () => (
         <EuiToolTip position="right" content="Here is some tooltip text">
           <EuiLink href="#">right</EuiLink>
         </EuiToolTip>
+        .
       </p>
 
       <p>
-        This tooltip has a long delay because it might be in a repeatable
-        component{' '}
+        This tooltip has a long <EuiCode>delay</EuiCode> because it might be in
+        a repeatable component{' '}
         <EuiToolTip delay="long" content="Here is some tooltip text">
           <EuiLink href="#">wink</EuiLink>
         </EuiToolTip>
+        .
       </p>
 
       <p>
@@ -54,41 +55,5 @@ export default () => (
         </EuiToolTip>
       </p>
     </EuiText>
-
-    <EuiSpacer />
-
-    <p>
-      <EuiToolTip
-        position="top"
-        content="Here is some tooltip text"
-        display="block"
-      >
-        <EuiButton fullWidth>
-          I am a block level tooltip, applied to a button with fullWidth
-        </EuiButton>
-      </EuiToolTip>
-    </p>
-
-    <EuiSpacer />
-
-    <EuiToolTip position="right" content="Works on anything">
-      <EuiFieldText
-        placeholder="Hover over me"
-        aria-label="ToolTip appears on hover"
-      />
-    </EuiToolTip>
-
-    <EuiSpacer />
-
-    <EuiToolTip
-      position="top"
-      content={
-        <p>
-          Works on any kind of element &mdash; buttons, inputs, you name it!
-        </p>
-      }
-    >
-      <EuiButton onClick={() => {}}>Hover me</EuiButton>
-    </EuiToolTip>
   </div>
 );

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

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import {
+  EuiToolTip,
+  EuiFieldText,
+  EuiSpacer,
+  EuiButton,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiToolTip
+      position="top"
+      content={
+        <p>
+          Works on any kind of element &mdash; buttons, inputs, you name it!
+        </p>
+      }
+    >
+      <EuiButton onClick={() => {}}>Hover me</EuiButton>
+    </EuiToolTip>
+
+    <EuiSpacer />
+
+    <EuiToolTip
+      position="top"
+      content="Here is some tooltip text."
+      display="block"
+    >
+      <EuiButton fullWidth>
+        I am a block level tooltip, applied to a button with fullWidth
+      </EuiButton>
+    </EuiToolTip>
+
+    <EuiSpacer />
+
+    <EuiToolTip
+      position="right"
+      content="Tooltip remains visible while the child is focused."
+    >
+      <EuiFieldText
+        placeholder="Focus me"
+        aria-label="Example of input wrapped with tooltip"
+      />
+    </EuiToolTip>
+  </div>
+);