Rename BodyPortal to Portal and accept prop "root" which is where the portal should be placed

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

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

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import BodyPortal from 'app/core/components/Portal/BodyPortal';
+import Portal from 'app/core/components/Portal/Portal';
 import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
 import Transition from 'react-transition-group/Transition';
 
@@ -39,7 +39,7 @@ class Popper extends PureComponent<Props> {
         </Reference>
         <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
           {transitionState => (
-            <BodyPortal className="hej">
+            <Portal>
               <ReactPopper placement={placement}>
                 {({ ref, style, placement, arrowProps }) => {
                   return (
@@ -61,7 +61,7 @@ class Popper extends PureComponent<Props> {
                   );
                 }}
               </ReactPopper>
-            </BodyPortal>
+            </Portal>
           )}
         </Transition>
       </Manager>