diff --git a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
index c5af38cf3a1..aaf2530f6db 100644
--- a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
+++ b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`EuiBetaBadge props size s is rendered 1`] = `
 
 exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = `
 <span
-  class="euiToolTipAnchor customAnchorClass"
+  class="euiToolTipAnchor customAnchorClass emotion-euiToolTipAnchor-inlineBlock"
   data-test-subj="DTS"
 >
   <span
diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
index 5d6158faa98..d0f386058dd 100644
--- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`CollapsedItemActions render 1`] = `
     class="euiPopover__anchor css-16vtueo-render"
   >
     <span
-      class="euiToolTipAnchor"
+      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
     >
       <button
         aria-label="All actions"
diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index 6fe263cbd09..5e046986f28 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -110,6 +110,7 @@ exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
                 "inserted": Object {
                   "animation-ox4vyo": true,
                   "dsw53p-empty-text-hoverStyles-EuiButtonIcon": true,
+                  "jcaat8-euiToolTipAnchor-inlineBlock": true,
                 },
                 "key": "css",
                 "nonce": undefined,
@@ -140,6 +141,20 @@ exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
                       
                       .euiOverlayMask{z-index:6000;}
                     </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-jcaat8-euiToolTipAnchor-inlineBlock{display:inline-block;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-jcaat8-euiToolTipAnchor-inlineBlock *[disabled]{pointer-events:none;}
+                    </style>
                     <style
                       data-emotion="css"
                       data-s=""
@@ -192,13 +207,27 @@ exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
 
                     </style>
                   </head>,
-                  "ctr": 6,
+                  "ctr": 8,
                   "insertionPoint": undefined,
                   "isSpeedy": false,
                   "key": "css",
                   "nonce": undefined,
                   "prepend": undefined,
                   "tags": Array [
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-jcaat8-euiToolTipAnchor-inlineBlock{display:inline-block;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-jcaat8-euiToolTipAnchor-inlineBlock *[disabled]{pointer-events:none;}
+                    </style>,
                     <style
                       data-emotion="css"
                       data-s=""
@@ -579,136 +608,290 @@ console.log(some);"
               onMouseOut={[Function]}
               position="top"
             >
-              <span
-                className="euiToolTipAnchor"
+              <EuiToolTipAnchor
+                display="inlineBlock"
+                id="generated-id"
+                isVisible={false}
+                onBlur={[Function]}
+                onFocus={[Function]}
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
               >
-                <EuiButtonIcon
-                  aria-label="Copy"
-                  color="text"
-                  iconType="copyClipboard"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
+                <span
+                  css="unknown styles"
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
                 >
-                  <button
-                    aria-label="Copy"
-                    css="unknown styles"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    type="button"
-                  >
-                    <Insertion
-                      cache={
-                        Object {
-                          "insert": [Function],
-                          "inserted": Object {
-                            "dsw53p-empty-text-hoverStyles-EuiButtonIcon": true,
-                          },
+                  <Insertion
+                    cache={
+                      Object {
+                        "insert": [Function],
+                        "inserted": Object {
+                          "dsw53p-empty-text-hoverStyles-EuiButtonIcon": true,
+                          "jcaat8-euiToolTipAnchor-inlineBlock": true,
+                        },
+                        "key": "css",
+                        "nonce": undefined,
+                        "registered": Object {},
+                        "sheet": StyleSheet {
+                          "_alreadyInsertedOrderInsensitiveRule": true,
+                          "_insertTag": [Function],
+                          "before": null,
+                          "container": <head>
+                            <style
+                              data-emotion="css"
+                              data-s=""
+                            >
+                              
+                              .emotion-euiToolTipAnchor-inlineBlock{display:inline-block;}
+                            </style>
+                            <style
+                              data-emotion="css"
+                              data-s=""
+                            >
+                              
+                              .emotion-euiToolTipAnchor-inlineBlock *[disabled]{pointer-events:none;}
+                            </style>
+                            <style
+                              data-emotion="css"
+                              data-s=""
+                            >
+                              
+                              .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon{color:#343741;}
+                            </style>
+                            <style
+                              data-emotion="css"
+                              data-s=""
+                            >
+                              
+                              .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:focus,.css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:active{background-color:rgba(211,218,230,0.2);}
+                            </style>
+                            <style
+                              data-emotion="css"
+                              data-s=""
+                            >
+                              
+                              .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:hover{background-color:rgba(211,218,230,0.2);}
+                            </style>
+                          </head>,
+                          "ctr": 5,
+                          "insertionPoint": undefined,
+                          "isSpeedy": false,
                           "key": "css",
                           "nonce": undefined,
-                          "registered": Object {},
-                          "sheet": StyleSheet {
-                            "_alreadyInsertedOrderInsensitiveRule": true,
-                            "_insertTag": [Function],
-                            "before": null,
-                            "container": <head>
-                              <style
-                                data-emotion="css"
-                                data-s=""
-                              >
-                                
-                                .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon{color:#343741;}
-                              </style>
-                              <style
-                                data-emotion="css"
-                                data-s=""
-                              >
-                                
-                                .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:focus,.css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:active{background-color:rgba(211,218,230,0.2);}
-                              </style>
-                              <style
-                                data-emotion="css"
-                                data-s=""
-                              >
-                                
-                                .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:hover{background-color:rgba(211,218,230,0.2);}
-                              </style>
-                            </head>,
-                            "ctr": 3,
-                            "insertionPoint": undefined,
-                            "isSpeedy": false,
-                            "key": "css",
-                            "nonce": undefined,
-                            "prepend": undefined,
-                            "tags": Array [
-                              <style
-                                data-emotion="css"
-                                data-s=""
-                              >
-                                
-                                .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon{color:#343741;}
-                              </style>,
-                              <style
-                                data-emotion="css"
-                                data-s=""
-                              >
-                                
-                                .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:focus,.css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:active{background-color:rgba(211,218,230,0.2);}
-                              </style>,
-                              <style
-                                data-emotion="css"
-                                data-s=""
-                              >
-                                
-                                .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:hover{background-color:rgba(211,218,230,0.2);}
-                              </style>,
-                            ],
-                          },
-                        }
+                          "prepend": undefined,
+                          "tags": Array [
+                            <style
+                              data-emotion="css"
+                              data-s=""
+                            >
+                              
+                              .emotion-euiToolTipAnchor-inlineBlock{display:inline-block;}
+                            </style>,
+                            <style
+                              data-emotion="css"
+                              data-s=""
+                            >
+                              
+                              .emotion-euiToolTipAnchor-inlineBlock *[disabled]{pointer-events:none;}
+                            </style>,
+                            <style
+                              data-emotion="css"
+                              data-s=""
+                            >
+                              
+                              .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon{color:#343741;}
+                            </style>,
+                            <style
+                              data-emotion="css"
+                              data-s=""
+                            >
+                              
+                              .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:focus,.css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:active{background-color:rgba(211,218,230,0.2);}
+                            </style>,
+                            <style
+                              data-emotion="css"
+                              data-s=""
+                            >
+                              
+                              .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:hover{background-color:rgba(211,218,230,0.2);}
+                            </style>,
+                          ],
+                        },
                       }
-                      isStringTag={true}
-                      serialized={
-                        Object {
-                          "map": undefined,
-                          "name": "dsw53p-empty-text-hoverStyles-EuiButtonIcon",
-                          "next": undefined,
-                          "styles": "color:#343741;&:focus,&:active{background-color:rgba(211,218,230,0.2);};label:empty;;;label:text;;;&:hover{background-color:rgba(211,218,230,0.2);};label:hoverStyles;;;;label:EuiButtonIcon;;",
-                          "toString": [Function],
-                        }
+                    }
+                    isStringTag={true}
+                    serialized={
+                      Object {
+                        "map": undefined,
+                        "name": "jcaat8-euiToolTipAnchor-inlineBlock",
+                        "next": undefined,
+                        "styles": "*[disabled]{pointer-events:none;};label:euiToolTipAnchor;;;display:inline-block;label:inlineBlock;;;",
+                        "toString": [Function],
                       }
-                    />
-                    <button
+                    }
+                  />
+                  <span
+                    className="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                  >
+                    <EuiButtonIcon
                       aria-label="Copy"
-                      className="euiButtonIcon euiButtonIcon--xSmall css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
-                      disabled={false}
+                      color="text"
+                      iconType="copyClipboard"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
-                      type="button"
                     >
-                      <EuiIcon
-                        aria-hidden="true"
-                        className="euiButtonIcon__icon"
-                        color="inherit"
-                        size="m"
-                        type="copyClipboard"
+                      <button
+                        aria-label="Copy"
+                        css="unknown styles"
+                        disabled={false}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        type="button"
                       >
-                        <span
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          data-euiicon-type="copyClipboard"
-                          size="m"
+                        <Insertion
+                          cache={
+                            Object {
+                              "insert": [Function],
+                              "inserted": Object {
+                                "dsw53p-empty-text-hoverStyles-EuiButtonIcon": true,
+                                "jcaat8-euiToolTipAnchor-inlineBlock": true,
+                              },
+                              "key": "css",
+                              "nonce": undefined,
+                              "registered": Object {},
+                              "sheet": StyleSheet {
+                                "_alreadyInsertedOrderInsensitiveRule": true,
+                                "_insertTag": [Function],
+                                "before": null,
+                                "container": <head>
+                                  <style
+                                    data-emotion="css"
+                                    data-s=""
+                                  >
+                                    
+                                    .emotion-euiToolTipAnchor-inlineBlock{display:inline-block;}
+                                  </style>
+                                  <style
+                                    data-emotion="css"
+                                    data-s=""
+                                  >
+                                    
+                                    .emotion-euiToolTipAnchor-inlineBlock *[disabled]{pointer-events:none;}
+                                  </style>
+                                  <style
+                                    data-emotion="css"
+                                    data-s=""
+                                  >
+                                    
+                                    .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon{color:#343741;}
+                                  </style>
+                                  <style
+                                    data-emotion="css"
+                                    data-s=""
+                                  >
+                                    
+                                    .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:focus,.css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:active{background-color:rgba(211,218,230,0.2);}
+                                  </style>
+                                  <style
+                                    data-emotion="css"
+                                    data-s=""
+                                  >
+                                    
+                                    .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:hover{background-color:rgba(211,218,230,0.2);}
+                                  </style>
+                                </head>,
+                                "ctr": 5,
+                                "insertionPoint": undefined,
+                                "isSpeedy": false,
+                                "key": "css",
+                                "nonce": undefined,
+                                "prepend": undefined,
+                                "tags": Array [
+                                  <style
+                                    data-emotion="css"
+                                    data-s=""
+                                  >
+                                    
+                                    .emotion-euiToolTipAnchor-inlineBlock{display:inline-block;}
+                                  </style>,
+                                  <style
+                                    data-emotion="css"
+                                    data-s=""
+                                  >
+                                    
+                                    .emotion-euiToolTipAnchor-inlineBlock *[disabled]{pointer-events:none;}
+                                  </style>,
+                                  <style
+                                    data-emotion="css"
+                                    data-s=""
+                                  >
+                                    
+                                    .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon{color:#343741;}
+                                  </style>,
+                                  <style
+                                    data-emotion="css"
+                                    data-s=""
+                                  >
+                                    
+                                    .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:focus,.css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:active{background-color:rgba(211,218,230,0.2);}
+                                  </style>,
+                                  <style
+                                    data-emotion="css"
+                                    data-s=""
+                                  >
+                                    
+                                    .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:hover{background-color:rgba(211,218,230,0.2);}
+                                  </style>,
+                                ],
+                              },
+                            }
+                          }
+                          isStringTag={true}
+                          serialized={
+                            Object {
+                              "map": undefined,
+                              "name": "dsw53p-empty-text-hoverStyles-EuiButtonIcon",
+                              "next": undefined,
+                              "styles": "color:#343741;&:focus,&:active{background-color:rgba(211,218,230,0.2);};label:empty;;;label:text;;;&:hover{background-color:rgba(211,218,230,0.2);};label:hoverStyles;;;;label:EuiButtonIcon;;",
+                              "toString": [Function],
+                            }
+                          }
                         />
-                      </EuiIcon>
-                    </button>
-                  </button>
-                </EuiButtonIcon>
-              </span>
+                        <button
+                          aria-label="Copy"
+                          className="euiButtonIcon euiButtonIcon--xSmall css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+                          disabled={false}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          type="button"
+                        >
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="copyClipboard"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              data-euiicon-type="copyClipboard"
+                              size="m"
+                            />
+                          </EuiIcon>
+                        </button>
+                      </button>
+                    </EuiButtonIcon>
+                  </span>
+                </span>
+              </EuiToolTipAnchor>
             </EuiToolTip>
           </EuiCopy>
         </div>
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 213121e110b..d45b3c49b55 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -990,7 +990,7 @@ Array [
               class="euiPopover__anchor css-16vtueo-render"
             >
               <span
-                class="euiToolTipAnchor"
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
                   aria-label="Display options"
@@ -1009,7 +1009,7 @@ Array [
             </div>
           </div>
           <span
-            class="euiToolTipAnchor"
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
           >
             <button
               aria-label="Enter fullscreen"
@@ -1435,7 +1435,7 @@ Array [
               class="euiPopover__anchor css-16vtueo-render"
             >
               <span
-                class="euiToolTipAnchor"
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
                   aria-label="Display options"
@@ -1454,7 +1454,7 @@ Array [
             </div>
           </div>
           <span
-            class="euiToolTipAnchor"
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
           >
             <button
               aria-label="Enter fullscreen"
@@ -2221,7 +2221,7 @@ Array [
               class="euiPopover__anchor css-16vtueo-render"
             >
               <span
-                class="euiToolTipAnchor"
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
                   aria-label="Display options"
@@ -2240,7 +2240,7 @@ Array [
             </div>
           </div>
           <span
-            class="euiToolTipAnchor"
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
           >
             <button
               aria-label="Enter fullscreen"
@@ -2665,7 +2665,7 @@ Array [
               class="euiPopover__anchor css-16vtueo-render"
             >
               <span
-                class="euiToolTipAnchor"
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
                   aria-label="Display options"
@@ -2684,7 +2684,7 @@ Array [
             </div>
           </div>
           <span
-            class="euiToolTipAnchor"
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
           >
             <button
               aria-label="Enter fullscreen"
diff --git a/src/components/date_picker/super_date_picker/super_update_button.tsx b/src/components/date_picker/super_date_picker/super_update_button.tsx
index d403391f143..d54a1c427d8 100644
--- a/src/components/date_picker/super_date_picker/super_update_button.tsx
+++ b/src/components/date_picker/super_date_picker/super_update_button.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { Component, MouseEventHandler, Ref } from 'react';
+import React, { Component, MouseEventHandler, ElementRef } from 'react';
 import classNames from 'classnames';
 
 import { EuiButton, EuiButtonProps } from '../../button';
@@ -15,6 +15,8 @@ import { EuiToolTip, EuiToolTipProps } from '../../tool_tip';
 import { EuiBreakpointSize } from '../../../services/breakpoint';
 import { EuiHideFor, EuiShowFor } from '../../responsive';
 
+type ToolTipRef = ElementRef<typeof EuiToolTip> | null;
+
 type EuiSuperUpdateButtonInternalProps = {
   isDisabled?: boolean;
   isLoading?: boolean;
@@ -58,7 +60,7 @@ export class EuiSuperUpdateButton extends Component<
   };
   _isMounted = false;
   tooltipTimeout: number | undefined;
-  tooltip: EuiToolTip | null = null;
+  tooltip: ToolTipRef = null;
 
   componentWillUnmount() {
     this._isMounted = false;
@@ -82,7 +84,7 @@ export class EuiSuperUpdateButton extends Component<
     }
   }
 
-  setTootipRef: Ref<EuiToolTip> = (node) => {
+  setTootipRef = (node: ToolTipRef) => {
     this.tooltip = node;
   };
 
diff --git a/src/components/index.scss b/src/components/index.scss
index 3fcf0647dfb..107d3c7f16e 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -36,4 +36,3 @@
 @import 'suggest/index';
 @import 'table/index';
 @import 'tabs/index';
-@import 'tool_tip/index';
diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
index fe61b3b78cf..4409b8dc5d7 100644
--- a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
+++ b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
@@ -95,7 +95,7 @@ exports[`EuiKeyPadMenuItem is rendered 1`] = `
 
 exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
 <span
-  class="euiToolTipAnchor"
+  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
     class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
@@ -128,7 +128,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
 
 exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1`] = `
 <span
-  class="euiToolTipAnchor customTooltipClass"
+  class="euiToolTipAnchor customTooltipClass emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
     class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
@@ -161,7 +161,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1
 
 exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] = `
 <span
-  class="euiToolTipAnchor"
+  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
     class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
@@ -199,7 +199,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] =
 
 exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent 1`] = `
 <span
-  class="euiToolTipAnchor"
+  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
     class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index b8fd005d316..e14d1fc7227 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
       class="euiMarkdownEditorToolbar__buttons"
     >
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Bold"
@@ -30,7 +30,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Italic"
@@ -50,7 +50,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Unordered list"
@@ -67,7 +67,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Ordered list"
@@ -84,7 +84,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Task list"
@@ -104,7 +104,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Quote"
@@ -121,7 +121,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Code"
@@ -138,7 +138,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Link"
@@ -243,7 +243,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       class="euiMarkdownEditorToolbar__buttons"
     >
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Bold"
@@ -260,7 +260,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Italic"
@@ -280,7 +280,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Unordered list"
@@ -297,7 +297,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Ordered list"
@@ -314,7 +314,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Task list"
@@ -334,7 +334,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Quote"
@@ -351,7 +351,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Code"
@@ -368,7 +368,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Link"
@@ -388,7 +388,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Tooltip"
@@ -449,7 +449,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiMarkdownEditorFooter__actions"
         />
         <span
-          class="euiToolTipAnchor"
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
@@ -490,7 +490,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       class="euiMarkdownEditorToolbar__buttons"
     >
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Bold"
@@ -507,7 +507,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Italic"
@@ -527,7 +527,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Unordered list"
@@ -544,7 +544,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Ordered list"
@@ -561,7 +561,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Task list"
@@ -581,7 +581,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Quote"
@@ -598,7 +598,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Code"
@@ -615,7 +615,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Link"
@@ -635,7 +635,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Tooltip"
@@ -695,7 +695,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           class="euiMarkdownEditorFooter__actions"
         />
         <span
-          class="euiToolTipAnchor"
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
@@ -736,7 +736,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       class="euiMarkdownEditorToolbar__buttons"
     >
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Bold"
@@ -753,7 +753,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Italic"
@@ -773,7 +773,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Unordered list"
@@ -790,7 +790,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Ordered list"
@@ -807,7 +807,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Task list"
@@ -827,7 +827,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Quote"
@@ -844,7 +844,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Code"
@@ -861,7 +861,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Link"
@@ -881,7 +881,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Tooltip"
@@ -941,7 +941,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           class="euiMarkdownEditorFooter__actions"
         />
         <span
-          class="euiToolTipAnchor"
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
@@ -982,7 +982,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       class="euiMarkdownEditorToolbar__buttons"
     >
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Bold"
@@ -999,7 +999,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Italic"
@@ -1019,7 +1019,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Unordered list"
@@ -1036,7 +1036,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Ordered list"
@@ -1053,7 +1053,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Task list"
@@ -1073,7 +1073,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Quote"
@@ -1090,7 +1090,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Code"
@@ -1107,7 +1107,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Link"
@@ -1127,7 +1127,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Tooltip"
@@ -1187,7 +1187,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           class="euiMarkdownEditorFooter__actions"
         />
         <span
-          class="euiToolTipAnchor"
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
@@ -1228,7 +1228,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       class="euiMarkdownEditorToolbar__buttons"
     >
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Bold"
@@ -1245,7 +1245,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Italic"
@@ -1265,7 +1265,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Unordered list"
@@ -1282,7 +1282,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Ordered list"
@@ -1299,7 +1299,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Task list"
@@ -1319,7 +1319,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Quote"
@@ -1336,7 +1336,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Code"
@@ -1353,7 +1353,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Link"
@@ -1373,7 +1373,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Tooltip"
@@ -1433,7 +1433,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           class="euiMarkdownEditorFooter__actions"
         />
         <span
-          class="euiToolTipAnchor"
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
@@ -1474,7 +1474,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       class="euiMarkdownEditorToolbar__buttons"
     >
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Bold"
@@ -1492,7 +1492,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Italic"
@@ -1513,7 +1513,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Unordered list"
@@ -1531,7 +1531,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Ordered list"
@@ -1549,7 +1549,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Task list"
@@ -1570,7 +1570,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Quote"
@@ -1588,7 +1588,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Code"
@@ -1606,7 +1606,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
         </button>
       </span>
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Link"
@@ -1627,7 +1627,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
         class="euiMarkdownEditorToolbar__divider"
       />
       <span
-        class="euiToolTipAnchor"
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
       >
         <button
           aria-label="Tooltip"
@@ -1690,7 +1690,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
           class="euiMarkdownEditorFooter__actions"
         />
         <span
-          class="euiToolTipAnchor"
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
diff --git a/src/components/suggest/__snapshots__/suggest.test.tsx.snap b/src/components/suggest/__snapshots__/suggest.test.tsx.snap
index 81205fe6731..aae480a544a 100644
--- a/src/components/suggest/__snapshots__/suggest.test.tsx.snap
+++ b/src/components/suggest/__snapshots__/suggest.test.tsx.snap
@@ -536,7 +536,7 @@ Array [
               </div>
             </div>
             <span
-              class="euiToolTipAnchor"
+              class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
             >
               <span
                 class="euiSuggestInput__statusIcon"
@@ -659,7 +659,7 @@ Array [
               </div>
             </div>
             <span
-              class="euiToolTipAnchor"
+              class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
             >
               <span
                 class="euiSuggestInput__statusIcon"
@@ -791,7 +791,7 @@ Array [
               </div>
             </div>
             <span
-              class="euiToolTipAnchor"
+              class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
             >
               <span
                 class="euiSuggestInput__statusIcon"
@@ -914,7 +914,7 @@ Array [
               </div>
             </div>
             <span
-              class="euiToolTipAnchor"
+              class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
             >
               <span
                 class="euiSuggestInput__statusIcon"
diff --git a/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap b/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap
index 4e5811beeef..52b722cf8df 100644
--- a/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap
+++ b/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiIconTip is rendered 1`] = `
 <span
-  class="euiToolTipAnchor"
+  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <span
     data-euiicon-type="questionInCircle"
@@ -15,7 +15,7 @@ exports[`EuiIconTip is rendered 1`] = `
 
 exports[`EuiIconTip props color is rendered as the icon color 1`] = `
 <span
-  class="euiToolTipAnchor"
+  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <span
     color="warning"
@@ -29,7 +29,7 @@ exports[`EuiIconTip props color is rendered as the icon color 1`] = `
 
 exports[`EuiIconTip props size is rendered as the icon size 1`] = `
 <span
-  class="euiToolTipAnchor"
+  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <span
     data-euiicon-type="questionInCircle"
@@ -42,7 +42,7 @@ exports[`EuiIconTip props size is rendered as the icon size 1`] = `
 
 exports[`EuiIconTip props type is rendered as the icon 1`] = `
 <span
-  class="euiToolTipAnchor"
+  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <span
     data-euiicon-type="alert"
diff --git a/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap b/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
index f136ecf83b1..923b18ec8f7 100644
--- a/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
+++ b/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
@@ -1,20 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiToolTip anchor props are rendered 1`] = `
-<span
-  class="euiToolTipAnchor customAnchorClass1"
-  data-test-subj="DTS"
+<body
+  class=""
 >
-  <button>
-    Trigger
-  </button>
-</span>
+  <div>
+    <span
+      class="euiToolTipAnchor customAnchorClass1 emotion-euiToolTipAnchor-inlineBlock"
+      data-test-subj="DTS"
+    >
+      <button>
+        Trigger
+      </button>
+    </span>
+  </div>
+</body>
 `;
 
 exports[`EuiToolTip display prop renders block 1`] = `
 <div>
   <span
-    class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+    class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
   >
     <button>
       Trigger
@@ -27,7 +33,7 @@ exports[`EuiToolTip is rendered 1`] = `
 <body>
   <div>
     <span
-      class="euiToolTipAnchor"
+      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
     >
       <button>
         Trigger
@@ -43,7 +49,7 @@ exports[`EuiToolTip shows tooltip on mouseover and focus 1`] = `
 >
   <div>
     <span
-      class="euiToolTipAnchor"
+      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
     >
       <button
         aria-describedby="id"
@@ -58,7 +64,7 @@ exports[`EuiToolTip shows tooltip on mouseover and focus 1`] = `
   >
     <div
       aria-label="aria-label"
-      class="euiToolTipPopover euiToolTip euiToolTip--top testClass1 testClass2"
+      class="euiToolTipPopover euiToolTip euiToolTip--top testClass1 testClass2 emotion-euiToolTip-top-EuiToolTipPopover"
       data-test-subj="test subject string"
       id="id"
       position="top"
@@ -66,12 +72,12 @@ exports[`EuiToolTip shows tooltip on mouseover and focus 1`] = `
       style="top: -16px; left: -10px;"
     >
       <div
-        class="euiToolTip__title"
+        class="euiToolTip__title emotion-euiToolTip__title"
       >
         title
       </div>
       <div
-        class="euiToolTip__arrow"
+        class="euiToolTip__arrow emotion-euiToolTip__arrow-EuiToolTipArrow"
         style="left: 4px; top: 0px;"
       />
       <div>
diff --git a/src/components/tool_tip/__snapshots__/tool_tip_popover.test.tsx.snap b/src/components/tool_tip/__snapshots__/tool_tip_popover.test.tsx.snap
index 5016391cd67..3a3c28a1085 100644
--- a/src/components/tool_tip/__snapshots__/tool_tip_popover.test.tsx.snap
+++ b/src/components/tool_tip/__snapshots__/tool_tip_popover.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiToolTipPopover is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiToolTipPopover testClass1 testClass2"
+  class="euiToolTipPopover testClass1 testClass2 emotion-euiToolTip-EuiToolTipPopover"
   data-test-subj="test subject string"
 />
 `;
diff --git a/src/components/tool_tip/_index.scss b/src/components/tool_tip/_index.scss
deleted file mode 100644
index 3e998fcbf09..00000000000
--- a/src/components/tool_tip/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'tool_tip';
diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss
deleted file mode 100644
index ab886897d51..00000000000
--- a/src/components/tool_tip/_tool_tip.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-/*
- * 1. Shift arrow 1px more than half its size to account for border radius
- */
-
-.euiToolTip {
-  @include euiToolTipStyle;
-  @include euiToolTipAnimation('top');
-  position: absolute;
-  opacity: 0;
-
-  // Custom sizing
-  $arrowSize: $euiSizeM;
-  $arrowPlusSize: (($arrowSize/2) + 1px) * -1; /* 1 */
-  $arrowMinusSize: (($arrowSize/2) - 1px) * -1; /* 1 */
-
-  .euiToolTip__arrow {
-    content: '';
-    position: absolute;
-    transform-origin: center;
-    border-radius: 2px;
-    background-color: $euiTooltipBackgroundColor;
-    width: $arrowSize;
-    height: $arrowSize;
-
-    transform: translateY($arrowPlusSize) rotateZ(45deg); /* 1 */
-  }
-
-  // Positions the arrow and animates in from the same side.
-  &.euiToolTip--right {
-    animation-name: euiToolTipRight;
-
-    .euiToolTip__arrow {
-      transform: translateX($arrowMinusSize) rotateZ(45deg); /* 1 */
-    }
-  }
-
-  &.euiToolTip--bottom {
-    animation-name: euiToolTipBottom;
-
-    .euiToolTip__arrow {
-      transform: translateY($arrowMinusSize) rotateZ(45deg); /* 1 */
-    }
-  }
-
-  &.euiToolTip--left {
-    animation-name: euiToolTipLeft;
-
-    .euiToolTip__arrow {
-      transform: translateX($arrowPlusSize) rotateZ(45deg); /* 1 */
-    }
-  }
-
-  .euiToolTip__title {
-    @include euiToolTipTitle;
-  }
-}
-
-.euiToolTipAnchor {
-  display: inline-block;
-
-  // disabled elements don't fire mouse events which means leaving a disabled element
-  // wouldn't trigger the onMouseOut and hide the tooltip; disabling pointer events
-  // on disabled elements means any mouse events remain handled by parent elements
-  // https://jakearchibald.com/2017/events-and-disabled-form-fields/
-  *[disabled] {
-    pointer-events: none;
-  }
-
-  &.euiToolTipAnchor--displayBlock {
-    display: block;
-  }
-}
-
-// Keyframes to animate in the tooltip.
-@keyframes euiToolTipTop {
-  0% {
-    opacity: 0;
-    transform: translateY(-$euiSize);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes euiToolTipBottom {
-  0% {
-    opacity: 0;
-    transform: translateY($euiSize);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes euiToolTipLeft {
-  0% {
-    opacity: 0;
-    transform: translateX(-$euiSize);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes euiToolTipRight {
-  0% {
-    opacity: 0;
-    transform: translateX($euiSize);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
diff --git a/src/components/tool_tip/index.ts b/src/components/tool_tip/index.ts
index c14b6060949..f5e6d71619d 100644
--- a/src/components/tool_tip/index.ts
+++ b/src/components/tool_tip/index.ts
@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-export type { ToolTipPositions, EuiToolTipProps } from './tool_tip';
+export type { ToolTipPositions } from './tool_tip_popover';
+export type { EuiToolTipProps } from './tool_tip';
 export { EuiToolTip } from './tool_tip';
 
 export type { EuiIconTipProps } from './icon_tip';
diff --git a/src/components/tool_tip/tool_tip.styles.ts b/src/components/tool_tip/tool_tip.styles.ts
new file mode 100644
index 00000000000..210529edc35
--- /dev/null
+++ b/src/components/tool_tip/tool_tip.styles.ts
@@ -0,0 +1,166 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css, keyframes } from '@emotion/react';
+import { logicalCSS, logicalSizeCSS, euiFontSize } from '../../global_styling';
+import { COLOR_MODES_STANDARD, UseEuiTheme, tint, shade } from '../../services';
+import { euiShadow } from '../../themes/amsterdam';
+
+export const euiToolTipBackgroundColor = (
+  euiTheme: UseEuiTheme['euiTheme'],
+  colorMode: UseEuiTheme['colorMode']
+) =>
+  colorMode === COLOR_MODES_STANDARD.dark
+    ? shade(euiTheme.colors.emptyShade, 1)
+    : tint(euiTheme.colors.fullShade, 0.25);
+
+export const euiToolTipBorderColor = (
+  euiTheme: UseEuiTheme['euiTheme'],
+  colorMode: UseEuiTheme['colorMode']
+) =>
+  colorMode === COLOR_MODES_STANDARD.dark
+    ? shade(euiTheme.colors.fullShade, 0.8)
+    : tint(euiTheme.colors.fullShade, 0.35);
+
+const euiToolTipAnimationVertical = (size: string) => keyframes`
+    0% {
+        opacity: 0;
+        transform: translateY(${size});
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+`;
+
+const euiToolTipAnimationHorizontal = (size: string) => keyframes`
+    0% {
+        opacity: 0;
+        transform: translateX(${size});
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+`;
+
+export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme, colorMode } = euiThemeContext;
+  const animationTiming = `${euiTheme.animation.slow} ease-out 0s forwards`;
+  /*
+   * 1. Shift arrow 1px more than half its size to account for border radius
+   */
+  const arrowSize = euiTheme.size.m;
+  const arrowSizeInt = parseInt(arrowSize, 10);
+  const arrowPlusSize = `${(arrowSizeInt / 2 + 1) * -1}px`; /* 1 */
+  const arrowMinusSize = `${(arrowSizeInt / 2 - 1) * -1}px`; /* 1 */
+  return {
+    // Base
+    euiToolTip: css`
+      ${euiShadow(euiThemeContext)};
+      border-radius: ${euiTheme.border.radius.medium};
+      background-color: ${euiToolTipBackgroundColor(euiTheme, colorMode)};
+      color: ${euiTheme.colors.ghost};
+      z-index: ${euiTheme.levels.toast};
+      ${logicalCSS('max-width', '256px')}
+      overflow-wrap: break-word;
+      padding: ${euiTheme.size.s};
+      ${euiFontSize(euiThemeContext, 's')};
+
+      position: absolute;
+
+      [class*='euiHorizontalRule'] {
+        background-color: ${euiToolTipBorderColor(euiTheme, colorMode)};
+      }
+    `,
+    // Sizes
+    s: css`
+      ${euiFontSize(euiThemeContext, 'xs')};
+    `,
+    // Positions
+    top: css`
+      animation: ${euiToolTipAnimationVertical(`-${euiTheme.size.base}`)}
+        ${animationTiming};
+    `,
+    bottom: css`
+      animation: ${euiToolTipAnimationVertical(euiTheme.size.base)}
+        ${animationTiming};
+
+      [class*='euiToolTip__arrow'] {
+        transform: translateY(${arrowMinusSize}) rotateZ(45deg); /* 1 */
+      }
+    `,
+    left: css`
+      animation: ${euiToolTipAnimationHorizontal(`-${euiTheme.size.base}`)}
+        ${animationTiming};
+
+      [class*='euiToolTip__arrow'] {
+        transform: translateX(${arrowPlusSize}) rotateZ(45deg); /* 1 */
+      }
+    `,
+    right: css`
+      animation: ${euiToolTipAnimationHorizontal(euiTheme.size.base)}
+        ${animationTiming};
+
+      [class*='euiToolTip__arrow'] {
+        transform: translateX(${arrowMinusSize}) rotateZ(45deg); /* 1 */
+      }
+    `,
+    // Elements
+    euiToolTip__arrow: css`
+      content: '';
+      position: absolute;
+      transform-origin: center;
+      border-radius: 2px;
+      background-color: ${euiToolTipBackgroundColor(euiTheme, colorMode)};
+      ${logicalSizeCSS(arrowSize, arrowSize)};
+      transform: translateY(${arrowPlusSize}) rotateZ(45deg); /* 1 */
+    `,
+  };
+};
+
+export const euiToolTipPopoverStyles = ({
+  euiTheme,
+  colorMode,
+}: UseEuiTheme) => ({
+  // Elements
+  euiToolTip__title: css`
+    font-weight: ${euiTheme.font.weight.bold};
+    ${logicalCSS(
+      'border-bottom',
+      `solid ${euiTheme.border.width.thin} ${euiToolTipBorderColor(
+        euiTheme,
+        colorMode
+      )}`
+    )};
+    ${logicalCSS('padding-bottom', euiTheme.size.xs)};
+    ${logicalCSS('margin-bottom', euiTheme.size.xs)};
+  `,
+});
+
+export const euiToolTipAnchorStyles = () => ({
+  // Elements
+  euiToolTipAnchor: css`
+    // disabled elements don't fire mouse events which means leaving a disabled element
+    // wouldn't trigger the onMouseOut and hide the tooltip; disabling pointer events
+    // on disabled elements means any mouse events remain handled by parent elements
+    // https://jakearchibald.com/2017/events-and-disabled-form-fields/
+    *[disabled] {
+      pointer-events: none;
+    }
+  `,
+  // Variants
+  block: css`
+    display: block;
+  `,
+  inlineBlock: css`
+    display: inline-block; ;
+  `,
+});
diff --git a/src/components/tool_tip/tool_tip.test.tsx b/src/components/tool_tip/tool_tip.test.tsx
index 4a1d07ac62d..6181b8895cb 100644
--- a/src/components/tool_tip/tool_tip.test.tsx
+++ b/src/components/tool_tip/tool_tip.test.tsx
@@ -49,7 +49,7 @@ describe('EuiToolTip', () => {
   });
 
   test('anchor props are rendered', () => {
-    const component = mount(
+    const { baseElement } = render(
       <EuiToolTip
         title="title"
         id="id"
@@ -64,7 +64,7 @@ describe('EuiToolTip', () => {
       </EuiToolTip>
     );
 
-    expect(component.render()).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 
   // This is a legacy unit test to ensure tooltips/portal updates still play well with Enzyme
@@ -86,7 +86,9 @@ describe('EuiToolTip', () => {
     trigger.simulate('focus');
     jest.runAllTimers(); // wait for showToolTip setTimeout
 
-    expect(document.querySelector('[data-test-subj="tooltip"]')).not.toBeNull();
+    expect(
+      document.querySelectorAll('[data-test-subj="tooltip"]')[1]
+    ).not.toBeNull();
 
     jest.useRealTimers();
   });
diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx
index 16d250b2809..35f4716e124 100644
--- a/src/components/tool_tip/tool_tip.tsx
+++ b/src/components/tool_tip/tool_tip.tsx
@@ -8,8 +8,6 @@
 
 import React, {
   Component,
-  cloneElement,
-  Fragment,
   ReactElement,
   ReactNode,
   MouseEvent as ReactMouseEvent,
@@ -19,14 +17,14 @@ import classNames from 'classnames';
 
 import { CommonProps, keysOf } from '../common';
 import { EuiPortal } from '../portal';
-import { EuiToolTipPopover } from './tool_tip_popover';
+import { EuiToolTipAnchor } from './tool_tip_anchor';
+import { EuiToolTipArrow } from './tool_tip_arrow';
+import { EuiToolTipPopover, ToolTipPositions } from './tool_tip_popover';
 import { enqueueStateChange } from '../../services/react';
 import { findPopoverPosition, htmlIdGenerator } from '../../services';
 
 import { EuiResizeObserver } from '../observer/resize_observer';
 
-export type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
-
 const positionsToClassNameMap: { [key in ToolTipPositions]: string } = {
   top: 'euiToolTip--top',
   right: 'euiToolTip--right',
@@ -184,18 +182,9 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
     }
   };
 
-  setPopoverRef = (ref: HTMLElement) => {
-    this.popover = ref;
+  setAnchorRef = (ref: HTMLElement) => (this.anchor = ref);
 
-    // if the popover has been unmounted, clear
-    // any previous knowledge about its size
-    if (ref == null) {
-      this.setState({
-        toolTipStyles: DEFAULT_TOOLTIP_STYLES,
-        arrowStyles: undefined,
-      });
-    }
-  };
+  setPopoverRef = (ref: HTMLElement) => (this.popover = ref);
 
   showToolTip = () => {
     if (!this.timeoutId) {
@@ -253,7 +242,11 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
     this.clearAnimationTimeout();
     enqueueStateChange(() => {
       if (this._isMounted) {
-        this.setState({ visible: false });
+        this.setState({
+          visible: false,
+          toolTipStyles: DEFAULT_TOOLTIP_STYLES,
+          arrowStyles: undefined,
+        });
       }
     });
   };
@@ -303,7 +296,13 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
       ...rest
     } = this.props;
 
-    const { arrowStyles, id, toolTipStyles, visible } = this.state;
+    const {
+      arrowStyles,
+      id,
+      toolTipStyles,
+      visible,
+      calculatedPosition,
+    } = this.state;
 
     const classes = classNames(
       'euiToolTip',
@@ -311,72 +310,48 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
       className
     );
 
-    const anchorClasses = classNames(
-      'euiToolTipAnchor',
-      display ? displayToClassNameMap[display] : null,
-      anchorClassName,
-      anchorProps?.className
-    );
-
-    let tooltip;
-    if (visible && (content || title)) {
-      tooltip = (
-        <EuiPortal>
-          <EuiToolTipPopover
-            className={classes}
-            style={toolTipStyles}
-            positionToolTip={this.positionToolTip}
-            popoverRef={this.setPopoverRef}
-            title={title}
-            id={id}
-            role="tooltip"
-            {...rest}
-          >
-            <div style={arrowStyles} className="euiToolTip__arrow" />
-            <EuiResizeObserver onResize={this.positionToolTip}>
-              {(resizeRef) => <div ref={resizeRef}>{content}</div>}
-            </EuiResizeObserver>
-          </EuiToolTipPopover>
-        </EuiPortal>
-      );
-    }
-
-    const anchor = (
-      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-      <span
-        ref={(anchor) => (this.anchor = anchor)}
-        {...anchorProps}
-        className={anchorClasses}
-        onMouseOver={this.showToolTip}
-        onMouseOut={this.onMouseOut}
-      >
-        {/**
-         * Re: jsx-a11y/mouse-events-have-key-events
-         * We apply onFocus, onBlur, etc to the children element because that's the element
-         * the user will be interacting with, as opposed to the enclosing anchor element.
-         * For example, if the inner component is a button and the user tabs to it, we want
-         * the enter key to trigger the button. That won't work if the enclosing anchor
-         * element has focus.
-         */}
-        {cloneElement(children, {
-          onFocus: (e: React.FocusEvent) => {
-            this.onFocus();
-            children.props.onFocus && children.props.onFocus(e);
-          },
-          onBlur: (e: React.FocusEvent) => {
-            this.onBlur();
-            children.props.onBlur && children.props.onBlur(e);
-          },
-          ...(visible && { 'aria-describedby': this.state.id }),
-        })}
-      </span>
-    );
+    const anchorClasses = classNames(anchorClassName, anchorProps?.className);
 
     return (
-      <Fragment>
-        {anchor}
-        {tooltip}
-      </Fragment>
+      <>
+        <EuiToolTipAnchor
+          {...anchorProps}
+          ref={this.setAnchorRef}
+          onBlur={this.onBlur}
+          onFocus={this.onFocus}
+          onMouseOver={this.showToolTip}
+          onMouseOut={this.onMouseOut}
+          id={this.state.id}
+          className={anchorClasses}
+          display={display!}
+          isVisible={visible}
+        >
+          {children}
+        </EuiToolTipAnchor>
+        {visible && (content || title) && (
+          <EuiPortal>
+            <EuiToolTipPopover
+              className={classes}
+              style={toolTipStyles}
+              positionToolTip={this.positionToolTip}
+              popoverRef={this.setPopoverRef}
+              title={title}
+              id={id}
+              role="tooltip"
+              calculatedPosition={calculatedPosition}
+              {...rest}
+            >
+              <EuiToolTipArrow
+                style={arrowStyles}
+                className="euiToolTip__arrow"
+              />
+              <EuiResizeObserver onResize={this.positionToolTip}>
+                {(resizeRef) => <div ref={resizeRef}>{content}</div>}
+              </EuiResizeObserver>
+            </EuiToolTipPopover>
+          </EuiPortal>
+        )}
+      </>
     );
   }
 }
diff --git a/src/components/tool_tip/tool_tip_anchor.tsx b/src/components/tool_tip/tool_tip_anchor.tsx
new file mode 100644
index 00000000000..7429e3694c1
--- /dev/null
+++ b/src/components/tool_tip/tool_tip_anchor.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, {
+  cloneElement,
+  HTMLAttributes,
+  ReactElement,
+  forwardRef,
+} from 'react';
+import classNames from 'classnames';
+
+import { euiToolTipAnchorStyles } from './tool_tip.styles';
+
+export interface EuiToolTipAnchorProps
+  extends Omit<
+    HTMLAttributes<HTMLSpanElement>,
+    'onBlur' | 'onFocus' | 'children'
+  > {
+  onBlur: () => void;
+  onFocus: () => void;
+  children: ReactElement;
+  isVisible: boolean;
+  display: 'block' | 'inlineBlock';
+}
+
+export const EuiToolTipAnchor = forwardRef<
+  HTMLSpanElement,
+  EuiToolTipAnchorProps
+>(
+  (
+    {
+      onBlur,
+      onFocus,
+      onMouseOver,
+      onMouseOut,
+      id,
+      className,
+      children,
+      display,
+      isVisible,
+      ...rest
+    },
+    ref
+  ) => {
+    const anchorCss = euiToolTipAnchorStyles();
+    const cssStyles = [anchorCss.euiToolTipAnchor, anchorCss[display]];
+
+    const classes = classNames('euiToolTipAnchor', className);
+
+    return (
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      <span
+        ref={ref}
+        {...rest}
+        css={cssStyles}
+        className={classes}
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+      >
+        {/**
+         * Re: jsx-a11y/mouse-events-have-key-events
+         * We apply onFocus, onBlur, etc to the children element because that's the element
+         * the user will be interacting with, as opposed to the enclosing anchor element.
+         * For example, if the inner component is a button and the user tabs to it, we want
+         * the enter key to trigger the button. That won't work if the enclosing anchor
+         * element has focus.
+         */}
+        {cloneElement(children, {
+          onFocus: (e: React.FocusEvent) => {
+            onFocus();
+            children.props.onFocus && children.props.onFocus(e);
+          },
+          onBlur: (e: React.FocusEvent) => {
+            onBlur();
+            children.props.onBlur && children.props.onBlur(e);
+          },
+          ...(isVisible && { 'aria-describedby': id }),
+        })}
+      </span>
+    );
+  }
+);
+EuiToolTipAnchor.displayName = 'EuiToolTipAnchor';
diff --git a/src/components/tool_tip/tool_tip_arrow.tsx b/src/components/tool_tip/tool_tip_arrow.tsx
new file mode 100644
index 00000000000..0c02d621708
--- /dev/null
+++ b/src/components/tool_tip/tool_tip_arrow.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import { useEuiTheme } from '../../services';
+import { euiToolTipStyles } from './tool_tip.styles';
+
+export const EuiToolTipArrow: FunctionComponent<HTMLAttributes<
+  HTMLDivElement
+>> = (props) => {
+  const euiTheme = useEuiTheme();
+  const toolTipCss = euiToolTipStyles(euiTheme);
+
+  return <div css={[toolTipCss.euiToolTip__arrow]} {...props} />;
+};
diff --git a/src/components/tool_tip/tool_tip_popover.tsx b/src/components/tool_tip/tool_tip_popover.tsx
index 29dee1987a4..850b7e4d96b 100644
--- a/src/components/tool_tip/tool_tip_popover.tsx
+++ b/src/components/tool_tip/tool_tip_popover.tsx
@@ -6,9 +6,20 @@
  * Side Public License, v 1.
  */
 
-import React, { HTMLAttributes, Component, ReactNode } from 'react';
+import React, {
+  HTMLAttributes,
+  FunctionComponent,
+  ReactNode,
+  useEffect,
+  useRef,
+  useCallback,
+} from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
+import { useEuiTheme } from '../../services';
+import { euiToolTipStyles, euiToolTipPopoverStyles } from './tool_tip.styles';
+
+export type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
 
 type Props = CommonProps &
   Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
@@ -16,59 +27,68 @@ type Props = CommonProps &
     children?: ReactNode;
     title?: ReactNode;
     popoverRef?: (ref: HTMLDivElement) => void;
+    calculatedPosition?: ToolTipPositions;
   };
 
-export class EuiToolTipPopover extends Component<Props> {
-  private popover: HTMLDivElement | undefined;
+export const EuiToolTipPopover: FunctionComponent<Props> = ({
+  children,
+  title,
+  className,
+  positionToolTip,
+  popoverRef,
+  calculatedPosition,
+  ...rest
+}) => {
+  const popover = useRef<HTMLDivElement>();
+
+  const euiTheme = useEuiTheme();
+  const toolTipCss = euiToolTipStyles(euiTheme);
+  const popoverStyles = euiToolTipPopoverStyles(euiTheme);
+  const titleCss = [popoverStyles.euiToolTip__title];
 
-  updateDimensions = () => {
+  const updateDimensions = useCallback(() => {
     requestAnimationFrame(() => {
       // Because of this delay, sometimes `positionToolTip` becomes unavailable.
-      if (this.popover) {
-        this.props.positionToolTip();
+      if (popover.current) {
+        positionToolTip();
       }
     });
-  };
+  }, [positionToolTip]);
 
-  setPopoverRef = (ref: HTMLDivElement) => {
-    this.popover = ref;
-    if (this.props.popoverRef) {
-      this.props.popoverRef(ref);
+  const setPopoverRef = (ref: HTMLDivElement) => {
+    if (popoverRef) {
+      popoverRef(ref);
     }
   };
 
-  componentDidMount() {
+  useEffect(() => {
     document.body.classList.add('euiBody-hasPortalContent');
-    window.addEventListener('resize', this.updateDimensions);
-  }
+    window.addEventListener('resize', updateDimensions);
 
-  componentWillUnmount() {
-    document.body.classList.remove('euiBody-hasPortalContent');
-    window.removeEventListener('resize', this.updateDimensions);
-  }
+    return () => {
+      document.body.classList.remove('euiBody-hasPortalContent');
+      window.removeEventListener('resize', updateDimensions);
+    };
+  }, [updateDimensions]);
 
-  render() {
-    const {
-      children,
-      title,
-      className,
-      positionToolTip,
-      popoverRef,
-      ...rest
-    } = this.props;
-
-    const classes = classNames('euiToolTipPopover', className);
-
-    let optionalTitle;
-    if (title) {
-      optionalTitle = <div className="euiToolTip__title">{title}</div>;
-    }
+  const classes = classNames('euiToolTipPopover', className);
 
-    return (
-      <div className={classes} ref={this.setPopoverRef} {...rest}>
-        {optionalTitle}
-        {children}
-      </div>
-    );
-  }
-}
+  return (
+    <div
+      css={[
+        toolTipCss.euiToolTip,
+        calculatedPosition && toolTipCss[calculatedPosition],
+      ]}
+      className={classes}
+      ref={setPopoverRef}
+      {...rest}
+    >
+      {title && (
+        <div css={titleCss} className="euiToolTip__title">
+          {title}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
diff --git a/src/global_styling/mixins/_tool_tip.scss b/src/global_styling/mixins/_tool_tip.scss
index 839cb7c40b1..83b062274dc 100644
--- a/src/global_styling/mixins/_tool_tip.scss
+++ b/src/global_styling/mixins/_tool_tip.scss
@@ -6,13 +6,10 @@
   z-index: $euiZLevel9;
   max-width: 256px;
   overflow-wrap: break-word;
+  padding: $euiSizeS;
 
-  @if ($size == 's') {
-    @include euiFontSizeXS;
-    padding: $euiSizeS;
-  } @else {
-    @include euiFontSizeS;
-    padding: $euiSizeM;
+  .euiHorizontalRule {
+    background-color: $euiTooltipBorderColor;
   }
 }
 
diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss
index 8566e195866..586579c06a5 100644
--- a/src/themes/amsterdam/overrides/_index.scss
+++ b/src/themes/amsterdam/overrides/_index.scss
@@ -28,4 +28,3 @@
 @import 'side_nav';
 @import 'steps';
 @import 'tabs';
-@import 'tooltip';
diff --git a/src/themes/amsterdam/overrides/_tooltip.scss b/src/themes/amsterdam/overrides/_tooltip.scss
deleted file mode 100644
index d56645673ed..00000000000
--- a/src/themes/amsterdam/overrides/_tooltip.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.euiToolTip {
-  padding: $euiSizeS;
-
-  .euiHorizontalRule {
-    background-color: $euiTooltipBorderColor;
-  }
-}
diff --git a/upcoming_changelogs/6104.md b/upcoming_changelogs/6104.md
new file mode 100644
index 00000000000..2585601d317
--- /dev/null
+++ b/upcoming_changelogs/6104.md
@@ -0,0 +1,6 @@
+- Updated `EuiToolTipPopover` to be a function component
+- Added `EuiToolTipAnchor` and `EuiToolTipArrow` components
+
+**CSS-in-JS conversions**
+
+- Converted `EuiToolTip` to Emotion styling
\ No newline at end of file