Update components to fit updated PopperController API

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}>
+        <Tooltip placement="auto" content={props.tooltip}>
-          <i className="gicon gicon-question gicon--has-hover" />
+          <div className="gf-form-help-icon--right-normal">
+            <i className="gicon gicon-question gicon--has-hover" />
+          </div>
         </Tooltip>
       )}
     </span>

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

@@ -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);

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">
+        <Tooltip  placement="auto" content="Tooltip text">
-          <a href="http://www.grafana.com">Link with tooltip</a>
+          <a className="test-class" href="http://www.grafana.com">Link with tooltip</a>
         </Tooltip>
       )
       .toJSON();

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> {
+const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => {
-  render() {
+  const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
-    const { children, hidePopper, showPopper, className, ...restProps } = this.props;
 
-    return (
+  return (
-      <div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
+    <PopperController {...controllerProps}>
-        <Popper {...restProps}>{children}</Popper>
+      {(showPopper, hidePopper, popperProps) => {
-      </div>
+        return (
-    );
+          <>
-  }
+            <Popper {...popperProps} referenceElement={tooltipTriggerRef.current} />
-}
+            {React.cloneElement(children, {
+              ref: tooltipTriggerRef,
+              onMouseEnter: showPopper,
+              onMouseLeave: hidePopper,
+            })}
+          </>
+        );
+      }}
+    </PopperController>
+  );
+};
 
-export default withPopper(Tooltip);
+export default Tooltip;

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
+<a
-  className="popper__manager test-class"
+  className="test-class"
+  href="http://www.grafana.com"
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
-  <div
+  Link with tooltip
-    className="popper_ref "
+</a>
-  >
-    <a
-      href="http://www.grafana.com"
-    >
-      Link with tooltip
-    </a>
-  </div>
-</div>
 `;

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>

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" />
+            <div
-            <span className="panel-info-corner-inner" />
+              className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
+            >
+              <i className="fa" />
+              <span className="panel-info-corner-inner" />
+            </div>
           </Tooltip>
         ) : null}
       </>

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}>
+            <Tooltip placement="auto" content={PermissionsInfo}>
-              <i className="gicon gicon-question gicon--has-hover" />
+              <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}>

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}>
+            <Tooltip placement="auto" content={PermissionsInfo}>
-              <i className="gicon gicon-question gicon--has-hover" />
+              <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}>

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}>
+          <Tooltip placement="auto" content={headerTooltip}>
-            <i className="gicon gicon-question gicon--has-hover" />
+            <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 && (

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

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
+    <Tooltip
-      className="page-sub-heading-icon"
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
-      <i
+      <div
-        className="gicon gicon-question gicon--has-hover"
+        className="page-sub-heading-icon"
-      />
+      >
-    </class_1>
+        <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
+    <Tooltip
-      className="page-sub-heading-icon"
       content="Sync LDAP or OAuth groups with your Grafana teams."
       placement="auto"
     >
-      <i
+      <div
-        className="gicon gicon-question gicon--has-hover"
+        className="page-sub-heading-icon"
-      />
+      >
-    </class_1>
+        <i
+          className="gicon gicon-question gicon--has-hover"
+        />
+      </div>
+    </Tooltip>
     <div
       className="page-action-bar__spacer"
     />