Merge pull request #14331 from grafana/develop-tooltip-css

Portal component

public/app/core/components/Portal/Portal.tsx

@@ -0,0 +1,35 @@
+import { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+
+interface Props {
+  className?: string;
+  root?: HTMLElement;
+}
+
+export default class BodyPortal extends PureComponent<Props> {
+  node: HTMLElement = document.createElement('div');
+  portalRoot: HTMLElement;
+
+  constructor(props) {
+    super(props);
+    const {
+      className,
+      root = document.body
+    } = this.props;
+
+    if (className) {
+      this.node.classList.add(className);
+    }
+
+    this.portalRoot = root;
+    this.portalRoot.appendChild(this.node);
+  }
+
+  componentWillUnmount() {
+    this.portalRoot.removeChild(this.node);
+  }
+
+  render() {
+    return ReactDOM.createPortal(this.props.children, this.node);
+  }
+}

public/app/core/components/Tooltip/Popper.tsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import Portal from 'app/core/components/Portal/Portal';
 import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
 import Transition from 'react-transition-group/Transition';
 
@@ -38,27 +39,29 @@ class Popper extends PureComponent<Props> {
         </Reference>
         <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
           {transitionState => (
-            <ReactPopper placement={placement}>
-              {({ ref, style, placement, arrowProps }) => {
-                return (
-                  <div
-                    ref={ref}
-                    style={{
-                      ...style,
-                      ...defaultTransitionStyles,
-                      ...transitionStyles[transitionState],
-                    }}
-                    data-placement={placement}
-                    className="popper"
-                  >
-                    <div className="popper__background">
-                      {renderContent(content)}
-                      <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
+            <Portal>
+              <ReactPopper placement={placement}>
+                {({ ref, style, placement, arrowProps }) => {
+                  return (
+                    <div
+                      ref={ref}
+                      style={{
+                        ...style,
+                        ...defaultTransitionStyles,
+                        ...transitionStyles[transitionState],
+                      }}
+                      data-placement={placement}
+                      className="popper"
+                    >
+                      <div className="popper__background">
+                        {renderContent(content)}
+                        <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
+                      </div>
                     </div>
-                  </div>
-                );
-              }}
-            </ReactPopper>
+                  );
+                }}
+              </ReactPopper>
+            </Portal>
           )}
         </Transition>
       </Manager>