Updates to Popper to be positions correctly within window

packages/grafana-ui/src/components/Tooltip/Popper.tsx

@@ -4,13 +4,12 @@ import { Manager, Popper as ReactPopper } from 'react-popper';
 import { Portal } from '@grafana/ui';
 import Transition from 'react-transition-group/Transition';
 
-
 const defaultTransitionStyles = {
   transition: 'opacity 200ms linear',
   opacity: 0,
 };
 
-const transitionStyles: {[key: string]: object} = {
+const transitionStyles: { [key: string]: object } = {
   exited: { opacity: 0 },
   entering: { opacity: 0 },
   entered: { opacity: 1 },
@@ -23,12 +22,12 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   placement?: PopperJS.Placement;
   content: string | ((props: any) => JSX.Element);
   referenceElement: PopperJS.ReferenceObject;
-
+  arrowClassName?: string;
 }
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { renderContent, show, placement, onMouseEnter, onMouseLeave, className } = this.props;
+    const { renderContent, show, placement, onMouseEnter, onMouseLeave, className, arrowClassName } = this.props;
     const { content } = this.props;
 
     return (
@@ -36,7 +35,12 @@ class Popper extends PureComponent<Props> {
         <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
           {transitionState => (
             <Portal>
-              <ReactPopper placement={placement} referenceElement={this.props.referenceElement}>
+              <ReactPopper
+                placement={placement}
+                referenceElement={this.props.referenceElement}
+                // TODO: move modifiers config to popper controller
+                modifiers={{ preventOverflow: { enabled: true, boundariesElement: 'window' } }}
+              >
                 {({ ref, style, placement, arrowProps }) => {
                   return (
                     <div
@@ -53,7 +57,12 @@ class Popper extends PureComponent<Props> {
                     >
                       <div className={className}>
                         {renderContent(content)}
-                        <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
+                        <div
+                          ref={arrowProps.ref}
+                          style={{ ...arrowProps.style }}
+                          data-placement={placement}
+                          className={arrowClassName}
+                        />
                       </div>
                     </div>
                   );

packages/grafana-ui/src/components/Tooltip/PopperController.tsx

@@ -70,6 +70,7 @@ class PopperController extends React.Component<Props, State> {
   };
 
   renderContent(content: PopperContent) {
+
     if (typeof content === 'function') {
       // If it's a function we assume it's a React component
       const ReactComponent = content;

packages/grafana-ui/src/components/Tooltip/Tooltip.tsx

@@ -28,6 +28,7 @@ export const Tooltip = ({ children, renderContent, theme, ...controllerProps }:
                 onMouseLeave={hidePopper}
                 referenceElement={tooltipTriggerRef.current}
                 className={popperBackgroundClassName}
+                arrowClassName={'popper__arrow'}
               />
             )}
             {React.cloneElement(children, {