Adds display prop to EuiTooltip for common display block needs

.gitignore

@@ -20,6 +20,7 @@ test-env/
 npm-debug.log
 yarn-error.log
 .cache-loader
+**/*.out
 
 # typescript output
 types/

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `30.0.0`.
+- Added display prop to `EuiTooltip` for common display block needs([4148](https://github.com/elastic/eui/pull/4148))
 
 ## [`30.0.0`](https://github.com/elastic/eui/tree/v30.0.0)
 

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

@@ -56,6 +56,19 @@ export default () => (
 
     <EuiSpacer />
 
+    <p>
+      <EuiToolTip
+        position="top"
+        content="Here is some tooltip text"
+        display="block">
+        <EuiLink href="#">
+          I am a block level tooltip, applied to the span anchor
+        </EuiLink>
+      </EuiToolTip>
+    </p>
+
+    <EuiSpacer />
+
     <EuiToolTip position="right" content="Works on anything">
       <EuiFieldText
         placeholder="Hover over me"

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

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiToolTip applies our block stylings 1`] = `
+<span
+  class="euiToolTipAnchor eui-displayBlock"
+>
+  <button>
+    Trigger
+  </button>
+</span>
+`;
+
 exports[`EuiToolTip is rendered 1`] = `
 <span
   class="euiToolTipAnchor"

src/components/tool_tip/tool_tip.test.tsx

@@ -54,4 +54,19 @@ describe('EuiToolTip', () => {
     await sleep(260); // wait for showToolTip setTimout
     expect(takeMountedSnapshot(component)).toMatchSnapshot();
   });
+
+  test('applies our block stylings', async () => {
+    const component = render(
+      <EuiToolTip
+        title="title"
+        id="id"
+        content="content"
+        {...requiredProps}
+        display="block">
+        <button>Trigger</button>
+      </EuiToolTip>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });

src/components/tool_tip/tool_tip.tsx

@@ -61,6 +61,11 @@ interface ToolTipStyles {
   opacity?: number;
 }
 
+const displayToClassNameMap = {
+  inlineBlock: undefined,
+  block: 'eui-displayBlock',
+};
+
 const DEFAULT_TOOLTIP_STYLES: ToolTipStyles = {
   // position the tooltip content near the top-left
   // corner of the window so it can't create scrollbars
@@ -89,6 +94,10 @@ export interface Props {
    * The main content of your tooltip.
    */
   content?: ReactNode;
+  /**
+   * Common diplay alternatives for the component.
+   */
+  display?: keyof typeof displayToClassNameMap;
   /**
    * Delay before showing tooltip. Good for repeatable items.
    */
@@ -286,6 +295,7 @@ export class EuiToolTip extends Component<Props, State> {
       content,
       title,
       delay,
+      display,
       ...rest
     } = this.props;
 
@@ -297,7 +307,11 @@ export class EuiToolTip extends Component<Props, State> {
       className
     );
 
-    const anchorClasses = classNames('euiToolTipAnchor', anchorClassName);
+    const anchorClasses = classNames(
+      'euiToolTipAnchor',
+      display ? displayToClassNameMap[display] : null,
+      anchorClassName
+    );
 
     let tooltip;
     if (visible && (content || title)) {