From de4e1a91f7d6b42c008e7e1bafac2b194f2d9fc6 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 8 Jan 2019 13:44:10 +0100
Subject: [PATCH 1/9] Refactored withPoper HOC to PopperController using render
 prop

---
 public/app/core/components/Tooltip/Popper.tsx | 17 ++--
 .../components/Tooltip/PopperController.tsx   | 94 +++++++++++++++++++
 .../core/components/Tooltip/withPopper.tsx    | 88 -----------------
 3 files changed, 100 insertions(+), 99 deletions(-)
 create mode 100644 public/app/core/components/Tooltip/PopperController.tsx
 delete mode 100644 public/app/core/components/Tooltip/withPopper.tsx

diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
index 36cf0fe837e..cbd00028e90 100644
--- a/public/app/core/components/Tooltip/Popper.tsx
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
+import * as PopperJS from 'popper.js';
+import { Manager, Popper as ReactPopper } from 'react-popper';
 import Portal from 'app/core/components/Portal/Portal';
-import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
 import Transition from 'react-transition-group/Transition';
 
 const defaultTransitionStyles = {
@@ -18,29 +19,23 @@ const transitionStyles = {
 interface Props {
   renderContent: (content: any) => any;
   show: boolean;
-  placement?: any;
+  placement?: PopperJS.Placement;
   content: string | ((props: any) => JSX.Element);
   refClassName?: string;
+  referenceElement: PopperJS.ReferenceObject;
 }
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { children, renderContent, show, placement, refClassName } = this.props;
+    const { renderContent, show, placement } = this.props;
     const { content } = this.props;
 
     return (
       <Manager>
-        <Reference>
-          {({ ref }) => (
-            <div className={`popper_ref ${refClassName || ''}`} ref={ref}>
-              {children}
-            </div>
-          )}
-        </Reference>
         <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
           {transitionState => (
             <Portal>
-              <ReactPopper placement={placement}>
+              <ReactPopper placement={placement} referenceElement={this.props.referenceElement}>
                 {({ ref, style, placement, arrowProps }) => {
                   return (
                     <div
diff --git a/public/app/core/components/Tooltip/PopperController.tsx b/public/app/core/components/Tooltip/PopperController.tsx
new file mode 100644
index 00000000000..47b66053085
--- /dev/null
+++ b/public/app/core/components/Tooltip/PopperController.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import * as PopperJS from 'popper.js';
+
+type PopperContent = string | (() => JSX.Element);
+
+export interface UsingPopperProps {
+  show?: boolean;
+  placement?: PopperJS.Placement;
+  content: PopperContent;
+  children: JSX.Element;
+  renderContent?: (content: PopperContent) => JSX.Element;
+}
+
+type PopperControllerRenderProp = (
+  showPopper: () => void,
+  hidePopper: () => void,
+  popperProps: {
+    show: boolean;
+    placement: PopperJS.Placement;
+    content: string | ((props: any) => JSX.Element);
+    renderContent: (content: any) => any;
+  }
+) => JSX.Element;
+
+interface Props {
+  placement?: PopperJS.Placement;
+  content: PopperContent;
+  className?: string;
+  children: PopperControllerRenderProp;
+}
+
+interface State {
+  placement: PopperJS.Placement;
+  show: boolean;
+}
+
+class PopperController extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      placement: this.props.placement || 'auto',
+      show: false,
+    };
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.placement && nextProps.placement !== this.state.placement) {
+      this.setState(prevState => {
+        return {
+          ...prevState,
+          placement: nextProps.placement,
+        };
+      });
+    }
+  }
+
+  showPopper = () => {
+    this.setState(prevState => ({
+      ...prevState,
+      show: true,
+    }));
+  };
+
+  hidePopper = () => {
+    this.setState(prevState => ({
+      ...prevState,
+      show: false,
+    }));
+  };
+
+  renderContent(content: PopperContent) {
+    if (typeof content === 'function') {
+      // If it's a function we assume it's a React component
+      const ReactComponent = content;
+      return <ReactComponent />;
+    }
+    return content;
+  }
+
+  render() {
+    const { children, content } = this.props;
+    const { show, placement } = this.state;
+
+    return children(this.showPopper, this.hidePopper, {
+      show,
+      placement,
+      content,
+      renderContent: this.renderContent,
+    });
+  }
+}
+
+export default PopperController;
diff --git a/public/app/core/components/Tooltip/withPopper.tsx b/public/app/core/components/Tooltip/withPopper.tsx
deleted file mode 100644
index 4ba05937531..00000000000
--- a/public/app/core/components/Tooltip/withPopper.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from 'react';
-
-export interface UsingPopperProps {
-  showPopper: (prevState: object) => void;
-  hidePopper: (prevState: object) => void;
-  renderContent: (content: any) => any;
-  show: boolean;
-  placement?: string;
-  content: string | ((props: any) => JSX.Element);
-  className?: string;
-  refClassName?: string;
-}
-
-interface Props {
-  placement?: string;
-  className?: string;
-  refClassName?: string;
-  content: string | ((props: any) => JSX.Element);
-}
-
-interface State {
-  placement: string;
-  show: boolean;
-}
-
-export default function withPopper(WrappedComponent) {
-  return class extends React.Component<Props, State> {
-    constructor(props) {
-      super(props);
-      this.setState = this.setState.bind(this);
-      this.state = {
-        placement: this.props.placement || 'auto',
-        show: false,
-      };
-    }
-
-    componentWillReceiveProps(nextProps) {
-      if (nextProps.placement && nextProps.placement !== this.state.placement) {
-        this.setState(prevState => {
-          return {
-            ...prevState,
-            placement: nextProps.placement,
-          };
-        });
-      }
-    }
-
-    showPopper = () => {
-      this.setState(prevState => ({
-        ...prevState,
-        show: true,
-      }));
-    };
-
-    hidePopper = () => {
-      this.setState(prevState => ({
-        ...prevState,
-        show: false,
-      }));
-    };
-
-    renderContent(content) {
-      if (typeof content === 'function') {
-        // If it's a function we assume it's a React component
-        const ReactComponent = content;
-        return <ReactComponent />;
-      }
-      return content;
-    }
-
-    render() {
-      const { show, placement } = this.state;
-      const className = this.props.className || '';
-
-      return (
-        <WrappedComponent
-          {...this.props}
-          showPopper={this.showPopper}
-          hidePopper={this.hidePopper}
-          renderContent={this.renderContent}
-          show={show}
-          placement={placement}
-          className={className}
-        />
-      );
-    }
-  };
-}

From ec904cf66247a870f49d4ccaf0ef52f2f476c30d Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 8 Jan 2019 13:53:59 +0100
Subject: [PATCH 2/9] Update components to fit updated PopperController API

---
 public/app/core/components/Label/Label.tsx    |  6 ++-
 .../app/core/components/Tooltip/Popover.tsx   | 19 ----------
 .../core/components/Tooltip/Tooltip.test.tsx  |  4 +-
 .../app/core/components/Tooltip/Tooltip.tsx   | 37 ++++++++++++-------
 .../__snapshots__/Tooltip.test.tsx.snap       | 17 +++------
 .../dashboard/dashgrid/PanelEditor.tsx        |  2 +-
 .../PanelHeader/PanelHeaderCorner.tsx         | 10 +++--
 .../permissions/DashboardPermissions.tsx      |  6 ++-
 .../features/folders/FolderPermissions.tsx    |  6 ++-
 public/app/features/teams/TeamGroupSync.tsx   |  6 ++-
 public/app/features/teams/TeamSettings.tsx    |  1 +
 .../__snapshots__/TeamGroupSync.test.tsx.snap | 30 +++++++++------
 12 files changed, 73 insertions(+), 71 deletions(-)
 delete mode 100644 public/app/core/components/Tooltip/Popover.tsx

diff --git a/public/app/core/components/Label/Label.tsx b/public/app/core/components/Label/Label.tsx
index 362c3c577f7..956678283f6 100644
--- a/public/app/core/components/Label/Label.tsx
+++ b/public/app/core/components/Label/Label.tsx
@@ -14,8 +14,10 @@ export const Label: SFC<Props> = props => {
     <span className={`gf-form-label width-${props.width ? props.width : '10'}`}>
       <span>{props.children}</span>
       {props.tooltip && (
-        <Tooltip className="gf-form-help-icon--right-normal" placement="auto" content={props.tooltip}>
-          <i className="gicon gicon-question gicon--has-hover" />
+        <Tooltip placement="auto" content={props.tooltip}>
+          <div className="gf-form-help-icon--right-normal">
+            <i className="gicon gicon-question gicon--has-hover" />
+          </div>
         </Tooltip>
       )}
     </span>
diff --git a/public/app/core/components/Tooltip/Popover.tsx b/public/app/core/components/Tooltip/Popover.tsx
deleted file mode 100644
index 62397243c1c..00000000000
--- a/public/app/core/components/Tooltip/Popover.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { PureComponent } from 'react';
-import Popper from './Popper';
-import withPopper, { UsingPopperProps } from './withPopper';
-
-class Popover extends PureComponent<UsingPopperProps> {
-  render() {
-    const { children, hidePopper, showPopper, className, ...restProps } = this.props;
-
-    const togglePopper = restProps.show ? hidePopper : showPopper;
-
-    return (
-      <div className={`popper__manager ${className}`} onClick={togglePopper}>
-        <Popper {...restProps}>{children}</Popper>
-      </div>
-    );
-  }
-}
-
-export default withPopper(Popover);
diff --git a/public/app/core/components/Tooltip/Tooltip.test.tsx b/public/app/core/components/Tooltip/Tooltip.test.tsx
index d2c96bb23d2..4a6def738e0 100644
--- a/public/app/core/components/Tooltip/Tooltip.test.tsx
+++ b/public/app/core/components/Tooltip/Tooltip.test.tsx
@@ -6,8 +6,8 @@ describe('Tooltip', () => {
   it('renders correctly', () => {
     const tree = renderer
       .create(
-        <Tooltip className="test-class" placement="auto" content="Tooltip text">
-          <a href="http://www.grafana.com">Link with tooltip</a>
+        <Tooltip  placement="auto" content="Tooltip text">
+          <a className="test-class" href="http://www.grafana.com">Link with tooltip</a>
         </Tooltip>
       )
       .toJSON();
diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/public/app/core/components/Tooltip/Tooltip.tsx
index 795da94a03c..a905be7d988 100644
--- a/public/app/core/components/Tooltip/Tooltip.tsx
+++ b/public/app/core/components/Tooltip/Tooltip.tsx
@@ -1,17 +1,28 @@
-import React, { PureComponent } from 'react';
+import React, { createRef } from 'react';
+import * as PopperJS from 'popper.js';
+
 import Popper from './Popper';
-import withPopper, { UsingPopperProps } from './withPopper';
+import PopperController, { UsingPopperProps } from './PopperController';
 
-class Tooltip extends PureComponent<UsingPopperProps> {
-  render() {
-    const { children, hidePopper, showPopper, className, ...restProps } = this.props;
+const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => {
+  const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
 
-    return (
-      <div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
-        <Popper {...restProps}>{children}</Popper>
-      </div>
-    );
-  }
-}
+  return (
+    <PopperController {...controllerProps}>
+      {(showPopper, hidePopper, popperProps) => {
+        return (
+          <>
+            <Popper {...popperProps} referenceElement={tooltipTriggerRef.current} />
+            {React.cloneElement(children, {
+              ref: tooltipTriggerRef,
+              onMouseEnter: showPopper,
+              onMouseLeave: hidePopper,
+            })}
+          </>
+        );
+      }}
+    </PopperController>
+  );
+};
 
-export default withPopper(Tooltip);
+export default Tooltip;
diff --git a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index c7d680049f4..761221906d4 100644
--- a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -1,19 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tooltip renders correctly 1`] = `
-<div
-  className="popper__manager test-class"
+<a
+  className="test-class"
+  href="http://www.grafana.com"
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
-  <div
-    className="popper_ref "
-  >
-    <a
-      href="http://www.grafana.com"
-    >
-      Link with tooltip
-    </a>
-  </div>
-</div>
+  Link with tooltip
+</a>
 `;
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index fbc683c2eb3..bce9af252ee 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -138,7 +138,7 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) {
   return (
     <div className="panel-editor-tabs__item" onClick={() => onClick(tab)}>
       <a className={tabClasses}>
-        <Tooltip content={`${tab.text}`} className="popper__manager--block" placement="auto">
+        <Tooltip content={`${tab.text}`} placement="auto">
           <i className={`gicon gicon-${tab.id}${activeTab === tab.id ? '-active' : ''}`} />
         </Tooltip>
       </a>
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
index 331e469a60d..3346f4b902d 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -78,12 +78,14 @@ export class PanelHeaderCorner extends Component<Props> {
         {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
           <Tooltip
             content={this.getInfoContent}
-            className="popper__manager--block"
-            refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
             placement="bottom-start"
           >
-            <i className="fa" />
-            <span className="panel-info-corner-inner" />
+            <div
+              className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
+            >
+              <i className="fa" />
+              <span className="panel-info-corner-inner" />
+            </div>
           </Tooltip>
         ) : null}
       </>
diff --git a/public/app/features/dashboard/permissions/DashboardPermissions.tsx b/public/app/features/dashboard/permissions/DashboardPermissions.tsx
index c07bef42930..95d78e7a737 100644
--- a/public/app/features/dashboard/permissions/DashboardPermissions.tsx
+++ b/public/app/features/dashboard/permissions/DashboardPermissions.tsx
@@ -70,8 +70,10 @@ export class DashboardPermissions extends PureComponent<Props, State> {
         <div className="dashboard-settings__header">
           <div className="page-action-bar">
             <h3 className="d-inline-block">Permissions</h3>
-            <Tooltip className="page-sub-heading-icon" placement="auto" content={PermissionsInfo}>
-              <i className="gicon gicon-question gicon--has-hover" />
+            <Tooltip placement="auto" content={PermissionsInfo}>
+              <div className="page-sub-heading-icon">
+                <i className="gicon gicon-question gicon--has-hover" />
+              </div>
             </Tooltip>
             <div className="page-action-bar__spacer" />
             <button className="btn btn-success pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
diff --git a/public/app/features/folders/FolderPermissions.tsx b/public/app/features/folders/FolderPermissions.tsx
index 176e270038b..39b44319c0f 100644
--- a/public/app/features/folders/FolderPermissions.tsx
+++ b/public/app/features/folders/FolderPermissions.tsx
@@ -84,8 +84,10 @@ export class FolderPermissions extends PureComponent<Props, State> {
         <div className="page-container page-body">
           <div className="page-action-bar">
             <h3 className="page-sub-heading">Folder Permissions</h3>
-            <Tooltip className="page-sub-heading-icon" placement="auto" content={PermissionsInfo}>
-              <i className="gicon gicon-question gicon--has-hover" />
+            <Tooltip placement="auto" content={PermissionsInfo}>
+              <div className="page-sub-heading-icon">
+                <i className="gicon gicon-question gicon--has-hover" />
+              </div>
             </Tooltip>
             <div className="page-action-bar__spacer" />
             <button className="btn btn-success pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx
index 3c3561c605e..822b32abdad 100644
--- a/public/app/features/teams/TeamGroupSync.tsx
+++ b/public/app/features/teams/TeamGroupSync.tsx
@@ -77,8 +77,10 @@ export class TeamGroupSync extends PureComponent<Props, State> {
       <div>
         <div className="page-action-bar">
           <h3 className="page-sub-heading">External group sync</h3>
-          <Tooltip className="page-sub-heading-icon" placement="auto" content={headerTooltip}>
-            <i className="gicon gicon-question gicon--has-hover" />
+          <Tooltip placement="auto" content={headerTooltip}>
+            <div className="page-sub-heading-icon">
+              <i className="gicon gicon-question gicon--has-hover" />
+            </div>
           </Tooltip>
           <div className="page-action-bar__spacer" />
           {groups.length > 0 && (
diff --git a/public/app/features/teams/TeamSettings.tsx b/public/app/features/teams/TeamSettings.tsx
index 35c306d664e..5e058289bf0 100644
--- a/public/app/features/teams/TeamSettings.tsx
+++ b/public/app/features/teams/TeamSettings.tsx
@@ -60,6 +60,7 @@ export class TeamSettings extends React.Component<Props, State> {
               onChange={this.onChangeName}
             />
           </div>
+
           <div className="gf-form max-width-30">
             <Label tooltip="This is optional and is primarily used to set the team profile avatar (via gravatar service)">
               Email
diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
index d486657d352..ac26dba88ed 100644
--- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
@@ -10,15 +10,18 @@ exports[`Render should render component 1`] = `
     >
       External group sync
     </h3>
-    <class_1
-      className="page-sub-heading-icon"
+    <Tooltip
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
-      <i
-        className="gicon gicon-question gicon--has-hover"
-      />
-    </class_1>
+      <div
+        className="page-sub-heading-icon"
+      >
+        <i
+          className="gicon gicon-question gicon--has-hover"
+        />
+      </div>
+    </Tooltip>
     <div
       className="page-action-bar__spacer"
     />
@@ -116,15 +119,18 @@ exports[`Render should render groups table 1`] = `
     >
       External group sync
     </h3>
-    <class_1
-      className="page-sub-heading-icon"
+    <Tooltip
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
-      <i
-        className="gicon gicon-question gicon--has-hover"
-      />
-    </class_1>
+      <div
+        className="page-sub-heading-icon"
+      >
+        <i
+          className="gicon gicon-question gicon--has-hover"
+        />
+      </div>
+    </Tooltip>
     <div
       className="page-action-bar__spacer"
     />

From e03461cea22d950b7c56e305352ebf3211803734 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 8 Jan 2019 13:54:54 +0100
Subject: [PATCH 3/9] Removed unused Popover component

---
 .../app/core/components/Tooltip/Popover.test.tsx | 16 ----------------
 .../Tooltip/__snapshots__/Popover.test.tsx.snap  | 16 ----------------
 2 files changed, 32 deletions(-)
 delete mode 100644 public/app/core/components/Tooltip/Popover.test.tsx
 delete mode 100644 public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap

diff --git a/public/app/core/components/Tooltip/Popover.test.tsx b/public/app/core/components/Tooltip/Popover.test.tsx
deleted file mode 100644
index eea416a9262..00000000000
--- a/public/app/core/components/Tooltip/Popover.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Popover from './Popover';
-
-describe('Popover', () => {
-  it('renders correctly', () => {
-    const tree = renderer
-      .create(
-        <Popover className="test-class" placement="auto" content="Popover text">
-          <button>Button with Popover</button>
-        </Popover>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
deleted file mode 100644
index b36a4fe9af9..00000000000
--- a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Popover renders correctly 1`] = `
-<div
-  className="popper__manager test-class"
-  onClick={[Function]}
->
-  <div
-    className="popper_ref "
-  >
-    <button>
-      Button with Popover
-    </button>
-  </div>
-</div>
-`;

From 22c9ce7de827ef9078449aecec69786eb9bbae7e Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 8 Jan 2019 17:01:50 +0100
Subject: [PATCH 4/9] Make tooltips persistent when hovered

---
 public/app/core/components/Tooltip/Popper.tsx  | 6 ++++--
 public/app/core/components/Tooltip/Tooltip.tsx | 7 ++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
index cbd00028e90..dc89b801e37 100644
--- a/public/app/core/components/Tooltip/Popper.tsx
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -16,7 +16,7 @@ const transitionStyles = {
   exiting: { opacity: 0 },
 };
 
-interface Props {
+interface Props extends React.DOMAttributes<HTMLDivElement> {
   renderContent: (content: any) => any;
   show: boolean;
   placement?: PopperJS.Placement;
@@ -27,7 +27,7 @@ interface Props {
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { renderContent, show, placement } = this.props;
+    const { renderContent, show, placement, onMouseEnter, onMouseLeave } = this.props;
     const { content } = this.props;
 
     return (
@@ -39,6 +39,8 @@ class Popper extends PureComponent<Props> {
                 {({ ref, style, placement, arrowProps }) => {
                   return (
                     <div
+                      onMouseEnter={onMouseEnter}
+                      onMouseLeave={onMouseLeave}
                       ref={ref}
                       style={{
                         ...style,
diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/public/app/core/components/Tooltip/Tooltip.tsx
index a905be7d988..8fcc4793ba9 100644
--- a/public/app/core/components/Tooltip/Tooltip.tsx
+++ b/public/app/core/components/Tooltip/Tooltip.tsx
@@ -12,7 +12,12 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro
       {(showPopper, hidePopper, popperProps) => {
         return (
           <>
-            <Popper {...popperProps} referenceElement={tooltipTriggerRef.current} />
+            <Popper
+              {...popperProps}
+              onMouseEnter={showPopper}
+              onMouseLeave={hidePopper}
+              referenceElement={tooltipTriggerRef.current}
+            />
             {React.cloneElement(children, {
               ref: tooltipTriggerRef,
               onMouseEnter: showPopper,

From 79c6fdc0e8fe7bb900a88c3782df8f8870d8a5c1 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 8 Jan 2019 20:51:00 +0100
Subject: [PATCH 5/9] wip

---
 packages/grafana-ui/package.json              |  6 ++++--
 .../src}/components/Tooltip/Popper.tsx        |  0
 .../components/Tooltip/PopperController.tsx   |  0
 .../src}/components/Tooltip/Tooltip.test.tsx  |  8 +++++---
 .../src}/components/Tooltip/Tooltip.tsx       | 19 +++++++++----------
 .../src/components/Tooltip/_Tooltip.scss      |  0
 .../__snapshots__/Tooltip.test.tsx.snap       |  0
 packages/grafana-ui/src/components/index.scss |  1 +
 packages/grafana-ui/src/components/index.ts   |  1 +
 public/app/core/components/Label/Label.tsx    |  2 +-
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   |  2 +-
 .../dashboard/dashgrid/DataSourceOption.tsx   |  2 +-
 .../dashboard/dashgrid/PanelEditor.tsx        |  2 +-
 .../PanelHeader/PanelHeaderCorner.tsx         |  6 +++---
 .../permissions/DashboardPermissions.tsx      |  2 +-
 .../features/folders/FolderPermissions.tsx    |  2 +-
 public/app/features/teams/TeamGroupSync.tsx   |  2 +-
 public/sass/_grafana.scss                     |  1 -
 yarn.lock                                     | 18 ++++++++++++++++--
 19 files changed, 46 insertions(+), 28 deletions(-)
 rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/Popper.tsx (100%)
 rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/PopperController.tsx (100%)
 rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/Tooltip.test.tsx (69%)
 rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/Tooltip.tsx (63%)
 rename public/sass/components/_popper.scss => packages/grafana-ui/src/components/Tooltip/_Tooltip.scss (100%)
 rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap (100%)

diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 2fb210e3b46..f48b8221f9c 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -11,6 +11,8 @@
   "license": "ISC",
   "dependencies": {
     "@torkelo/react-select": "2.1.1",
+    "@types/react-test-renderer": "^16.0.3",
+    "@types/react-transition-group": "^2.0.15",
     "classnames": "^2.2.5",
     "jquery": "^3.2.1",
     "lodash": "^4.17.10",
@@ -23,11 +25,11 @@
     "react-virtualized": "^9.21.0"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.6",
     "@types/jest": "^23.3.2",
+    "@types/jquery": "^1.10.35",
     "@types/lodash": "^4.14.119",
     "@types/react": "^16.7.6",
-    "@types/classnames": "^2.2.6",
-    "@types/jquery": "^1.10.35",
     "typescript": "^3.2.2"
   }
 }
diff --git a/public/app/core/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
similarity index 100%
rename from public/app/core/components/Tooltip/Popper.tsx
rename to packages/grafana-ui/src/components/Tooltip/Popper.tsx
diff --git a/public/app/core/components/Tooltip/PopperController.tsx b/packages/grafana-ui/src/components/Tooltip/PopperController.tsx
similarity index 100%
rename from public/app/core/components/Tooltip/PopperController.tsx
rename to packages/grafana-ui/src/components/Tooltip/PopperController.tsx
diff --git a/public/app/core/components/Tooltip/Tooltip.test.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
similarity index 69%
rename from public/app/core/components/Tooltip/Tooltip.test.tsx
rename to packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
index 4a6def738e0..95d01c7f2fe 100644
--- a/public/app/core/components/Tooltip/Tooltip.test.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Tooltip from './Tooltip';
+import { Tooltip } from './Tooltip';
 
 describe('Tooltip', () => {
   it('renders correctly', () => {
     const tree = renderer
       .create(
-        <Tooltip  placement="auto" content="Tooltip text">
-          <a className="test-class" href="http://www.grafana.com">Link with tooltip</a>
+        <Tooltip placement="auto" content="Tooltip text">
+          <a className="test-class" href="http://www.grafana.com">
+            Link with tooltip
+          </a>
         </Tooltip>
       )
       .toJSON();
diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
similarity index 63%
rename from public/app/core/components/Tooltip/Tooltip.tsx
rename to packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index 8fcc4793ba9..9cffb151d83 100644
--- a/public/app/core/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -1,10 +1,9 @@
 import React, { createRef } from 'react';
 import * as PopperJS from 'popper.js';
-
 import Popper from './Popper';
 import PopperController, { UsingPopperProps } from './PopperController';
 
-const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => {
+export const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => {
   const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
 
   return (
@@ -12,12 +11,14 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro
       {(showPopper, hidePopper, popperProps) => {
         return (
           <>
-            <Popper
-              {...popperProps}
-              onMouseEnter={showPopper}
-              onMouseLeave={hidePopper}
-              referenceElement={tooltipTriggerRef.current}
-            />
+            {tooltipTriggerRef.current && (
+              <Popper
+                {...popperProps}
+                onMouseEnter={showPopper}
+                onMouseLeave={hidePopper}
+                referenceElement={tooltipTriggerRef.current}
+              />
+            )}
             {React.cloneElement(children, {
               ref: tooltipTriggerRef,
               onMouseEnter: showPopper,
@@ -29,5 +30,3 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro
     </PopperController>
   );
 };
-
-export default Tooltip;
diff --git a/public/sass/components/_popper.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
similarity index 100%
rename from public/sass/components/_popper.scss
rename to packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
diff --git a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
similarity index 100%
rename from public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
rename to packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index d52508c946c..fd10d21f9f1 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -1 +1,2 @@
 @import 'DeleteButton/DeleteButton';
+@import 'Tooltip/Tooltip';
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index b57b9bcfdb7..8b9b11404c2 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -1 +1,2 @@
 export { DeleteButton } from './DeleteButton/DeleteButton';
+export { Tooltip } from './Tooltip/Tooltip';
diff --git a/public/app/core/components/Label/Label.tsx b/public/app/core/components/Label/Label.tsx
index 956678283f6..5d60efa056a 100644
--- a/public/app/core/components/Label/Label.tsx
+++ b/public/app/core/components/Label/Label.tsx
@@ -1,5 +1,5 @@
 import React, { SFC, ReactNode } from 'react';
-import Tooltip from '../Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 
 interface Props {
   tooltip?: string;
diff --git a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 2524a265054..86e15923bda 100644
--- a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -1,5 +1,5 @@
 import React, { SFC, ReactNode, PureComponent } from 'react';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 
 interface ToggleButtonGroupProps {
   label?: string;
diff --git a/public/app/features/dashboard/dashgrid/DataSourceOption.tsx b/public/app/features/dashboard/dashgrid/DataSourceOption.tsx
index 0adfc4abe16..9a3ce527510 100644
--- a/public/app/features/dashboard/dashgrid/DataSourceOption.tsx
+++ b/public/app/features/dashboard/dashgrid/DataSourceOption.tsx
@@ -1,5 +1,5 @@
 import React, { SFC } from 'react';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 
 interface Props {
   label: string;
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index bce9af252ee..22921a4f98e 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -15,7 +15,7 @@ import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types/plugins';
 
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 
 interface PanelEditorProps {
   panel: PanelModel;
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
index 3346f4b902d..82b8d57b64a 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
+import Remarkable from 'remarkable';
+import { Tooltip } from '@grafana/ui';
 import { PanelModel } from 'app/features/dashboard/panel_model';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
 import templateSrv from 'app/features/templating/template_srv';
 import { LinkSrv } from 'app/features/dashboard/panellinks/link_srv';
 import { getTimeSrv, TimeSrv } from 'app/features/dashboard/time_srv';
-import Remarkable from 'remarkable';
 
 enum InfoModes {
   Error = 'Error',
@@ -78,7 +78,7 @@ export class PanelHeaderCorner extends Component<Props> {
         {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
           <Tooltip
             content={this.getInfoContent}
-            placement="bottom-start"
+              placement="bottom-start"
           >
             <div
               className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
diff --git a/public/app/features/dashboard/permissions/DashboardPermissions.tsx b/public/app/features/dashboard/permissions/DashboardPermissions.tsx
index 95d78e7a737..96d0e23adcd 100644
--- a/public/app/features/dashboard/permissions/DashboardPermissions.tsx
+++ b/public/app/features/dashboard/permissions/DashboardPermissions.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { StoreState, FolderInfo } from 'app/types';
 import { DashboardAcl, PermissionLevel, NewDashboardAclItem } from 'app/types/acl';
diff --git a/public/app/features/folders/FolderPermissions.tsx b/public/app/features/folders/FolderPermissions.tsx
index 39b44319c0f..62a479b9124 100644
--- a/public/app/features/folders/FolderPermissions.tsx
+++ b/public/app/features/folders/FolderPermissions.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { NavModel, StoreState, FolderState } from 'app/types';
diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx
index 822b32abdad..ee60df28866 100644
--- a/public/app/features/teams/TeamGroupSync.tsx
+++ b/public/app/features/teams/TeamGroupSync.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import SlideDown from 'app/core/components/Animations/SlideDown';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
 import { TeamGroup } from '../../types';
 import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions';
 import { getTeamGroups } from './state/selectors';
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 404a212241b..10cc7335bdf 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -97,7 +97,6 @@
 @import 'components/page_header';
 @import 'components/dashboard_settings';
 @import 'components/empty_list_cta';
-@import 'components/popper';
 @import 'components/form_select_box';
 @import 'components/panel_editor';
 @import 'components/toolbar';
diff --git a/yarn.lock b/yarn.lock
index 78300be233e..ae8c1dc5e06 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1091,6 +1091,13 @@
     "@types/react-dom" "*"
     "@types/react-transition-group" "*"
 
+"@types/react-test-renderer@^16.0.3":
+  version "16.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.0.3.tgz#cce5c983d66cc5c3582e7c2f44b274ab635a8acc"
+  integrity sha512-NWOAxVQeJxpXuNKgw83Hah0nquiw1nUexM9qY/Hk3a+XhZwgMtaa6GLA9E1TKMT75Odb3/KE/jiBO4enTuEJjQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@*":
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.14.tgz#afd0cd785a97f070b55765e9f9d76ff568269001"
@@ -1098,7 +1105,14 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.7.6", "@types/react@^16.1.0", "@types/react@^16.7.6":
+"@types/react-transition-group@^2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.15.tgz#e5ee3fe558832e141cc6041bdd54caea7b787af8"
+  integrity sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16.1.0", "@types/react@^16.7.6":
   version "16.7.6"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040"
   integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA==
@@ -3161,7 +3175,7 @@ caniuse-api@^1.5.2:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-db@1.0.30000772, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000772"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"
   integrity sha1-UarokXaChureSj2DGep21qAbUSs=

From 076defdc0b1b6e119c9c619967cafab3682cdee3 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 9 Jan 2019 10:33:20 +0100
Subject: [PATCH 6/9] Post merge updates

---
 .../features/dashboard/dashgrid/DataPanel.tsx | 25 ++++++++-----------
 .../PanelHeader/PanelHeaderCorner.tsx         |  2 +-
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index fa21276d7a2..d71a274ab10 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -1,6 +1,8 @@
 // Library
 import React, { Component } from 'react';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import { Tooltip } from '@grafana/ui';
+import { Themes } from '@grafana/ui/src/components/Tooltip/Popper';
+
 import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary';
 
 // Services
@@ -12,7 +14,6 @@ import kbn from 'app/core/utils/kbn';
 // Types
 import { DataQueryOptions, DataQueryResponse } from 'app/types';
 import { TimeRange, TimeSeries, LoadingState } from '@grafana/ui';
-import { Themes } from 'app/core/components/Tooltip/Popper';
 
 const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
 
@@ -144,10 +145,10 @@ export class DataPanel extends Component<Props, State> {
       this.setState({
         loading: LoadingState.Error,
         isFirstLoad: false,
-        errorMessage: errorMessage
+        errorMessage: errorMessage,
       });
     }
-  }
+  };
 
   render() {
     const { queries } = this.props;
@@ -171,7 +172,7 @@ export class DataPanel extends Component<Props, State> {
       <>
         {this.renderLoadingStates()}
         <ErrorBoundary>
-          {({error, errorInfo}) => {
+          {({ error, errorInfo }) => {
             if (errorInfo) {
               this.onError(error.message || DEFAULT_PLUGIN_ERROR);
               return null;
@@ -200,15 +201,11 @@ export class DataPanel extends Component<Props, State> {
       );
     } else if (loading === LoadingState.Error) {
       return (
-        <Tooltip
-          content={errorMessage}
-          className="popper__manager--block"
-          refClassName={`panel-info-corner panel-info-corner--error`}
-          placement="bottom-start"
-          theme={Themes.Error}
-        >
-          <i className="fa" />
-          <span className="panel-info-corner-inner" />
+        <Tooltip content={errorMessage} placement="bottom-start" theme={Themes.Error}>
+          <div className="panel-info-corner panel-info-corner--error">
+            <i className="fa" />
+            <span className="panel-info-corner-inner" />
+          </div>
         </Tooltip>
       );
     }
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
index 82b8d57b64a..6b6f81fc579 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -78,7 +78,7 @@ export class PanelHeaderCorner extends Component<Props> {
         {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
           <Tooltip
             content={this.getInfoContent}
-              placement="bottom-start"
+            placement="bottom-start"
           >
             <div
               className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}

From fae8ff57500fa7d9deb20395a7495034861562ba Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 9 Jan 2019 10:55:38 +0100
Subject: [PATCH 7/9] Move Portal to @grafana/ui

---
 .../grafana-ui/src}/components/Portal/Portal.tsx              | 4 ++--
 packages/grafana-ui/src/components/Tooltip/Popper.tsx         | 4 ++--
 packages/grafana-ui/src/components/index.ts                   | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)
 rename {public/app/core => packages/grafana-ui/src}/components/Portal/Portal.tsx (87%)

diff --git a/public/app/core/components/Portal/Portal.tsx b/packages/grafana-ui/src/components/Portal/Portal.tsx
similarity index 87%
rename from public/app/core/components/Portal/Portal.tsx
rename to packages/grafana-ui/src/components/Portal/Portal.tsx
index 25d54a64209..6f51f4053e2 100644
--- a/public/app/core/components/Portal/Portal.tsx
+++ b/packages/grafana-ui/src/components/Portal/Portal.tsx
@@ -6,11 +6,11 @@ interface Props {
   root?: HTMLElement;
 }
 
-export default class BodyPortal extends PureComponent<Props> {
+export class Portal extends PureComponent<Props> {
   node: HTMLElement = document.createElement('div');
   portalRoot: HTMLElement;
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     const {
       className,
diff --git a/packages/grafana-ui/src/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
index fd12e7db517..c393ed4bac5 100644
--- a/packages/grafana-ui/src/components/Tooltip/Popper.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
@@ -1,7 +1,7 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import * as PopperJS from 'popper.js';
 import { Manager, Popper as ReactPopper } from 'react-popper';
-import Portal from 'app/core/components/Portal/Portal';
+import { Portal } from '@grafana/ui';
 import Transition from 'react-transition-group/Transition';
 
 export enum Themes {
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 8b9b11404c2..d1205e6c291 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -1,2 +1,3 @@
 export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
+export { Portal } from './Portal/Portal';

From 0b4d212bd2fe8a9ac198ae9478791356d277023b Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 9 Jan 2019 10:56:40 +0100
Subject: [PATCH 8/9] Fixing TS errors and updating snapshot

---
 packages/grafana-ui/src/components/Tooltip/Popper.tsx     | 4 ++--
 .../src/components/Tooltip/PopperController.tsx           | 4 ++--
 .../teams/__snapshots__/TeamGroupSync.test.tsx.snap       | 8 ++++----
 yarn.lock                                                 | 4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
index c393ed4bac5..b405d4c4328 100644
--- a/packages/grafana-ui/src/components/Tooltip/Popper.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import * as PopperJS from 'popper.js';
 import { Manager, Popper as ReactPopper } from 'react-popper';
 import { Portal } from '@grafana/ui';
@@ -14,7 +14,7 @@ const defaultTransitionStyles = {
   opacity: 0,
 };
 
-const transitionStyles = {
+const transitionStyles: {[key: string]: object} = {
   exited: { opacity: 0 },
   entering: { opacity: 0 },
   entered: { opacity: 1 },
diff --git a/packages/grafana-ui/src/components/Tooltip/PopperController.tsx b/packages/grafana-ui/src/components/Tooltip/PopperController.tsx
index 1b6703c3627..5f4010ac58a 100644
--- a/packages/grafana-ui/src/components/Tooltip/PopperController.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/PopperController.tsx
@@ -50,10 +50,10 @@ class PopperController extends React.Component<Props, State> {
 
   componentWillReceiveProps(nextProps: Props) {
     if (nextProps.placement && nextProps.placement !== this.state.placement) {
-      this.setState(prevState => {
+      this.setState((prevState: State) => {
         return {
           ...prevState,
-          placement: nextProps.placement,
+          placement: nextProps.placement || 'auto',
         };
       });
     }
diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
index ac26dba88ed..e28eb86dc7a 100644
--- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Render should render component 1`] = `
     >
       External group sync
     </h3>
-    <Tooltip
+    <Component
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
@@ -21,7 +21,7 @@ exports[`Render should render component 1`] = `
           className="gicon gicon-question gicon--has-hover"
         />
       </div>
-    </Tooltip>
+    </Component>
     <div
       className="page-action-bar__spacer"
     />
@@ -119,7 +119,7 @@ exports[`Render should render groups table 1`] = `
     >
       External group sync
     </h3>
-    <Tooltip
+    <Component
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
@@ -130,7 +130,7 @@ exports[`Render should render groups table 1`] = `
           className="gicon gicon-question gicon--has-hover"
         />
       </div>
-    </Tooltip>
+    </Component>
     <div
       className="page-action-bar__spacer"
     />
diff --git a/yarn.lock b/yarn.lock
index ae8c1dc5e06..23ebebb689c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1112,7 +1112,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.1.0", "@types/react@^16.7.6":
+"@types/react@*", "@types/react@16.7.6", "@types/react@^16.1.0", "@types/react@^16.7.6":
   version "16.7.6"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040"
   integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA==
@@ -3175,7 +3175,7 @@ caniuse-api@^1.5.2:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+caniuse-db@1.0.30000772, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000772"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"
   integrity sha1-UarokXaChureSj2DGep21qAbUSs=

From 6e3225c29e399ce4d0837975773a2acb93cd61d7 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 9 Jan 2019 13:09:26 +0100
Subject: [PATCH 9/9] Removed unused refClassNameprops from Propper

---
 packages/grafana-ui/src/components/Tooltip/Popper.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
index b405d4c4328..f6f9fa6f73a 100644
--- a/packages/grafana-ui/src/components/Tooltip/Popper.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Popper.tsx
@@ -26,7 +26,6 @@ interface Props extends React.DOMAttributes<HTMLDivElement> {
   show: boolean;
   placement?: PopperJS.Placement;
   content: string | ((props: any) => JSX.Element);
-  refClassName?: string;
   referenceElement: PopperJS.ReferenceObject;
   theme?: Themes;
 }