Use tooltip from grafana/ui

src/components/ActionButton/ActionButton.tsx

@@ -1,9 +1,8 @@
 import React, { FC } from 'react';
 import { cx, css } from '@emotion/css';
-import { stylesFactory, useTheme } from '@grafana/ui';
+import { stylesFactory, useTheme, Tooltip } from '@grafana/ui';
 import { GrafanaTheme, GrafanaThemeType } from '@grafana/data';
 import { FAIcon } from '../FAIcon/FAIcon';
-import { Tooltip } from '../Tooltip/Tooltip';
 
 interface Props {
   icon?: string;

src/components/Tooltip/Popper.tsx

@@ -1,80 +0,0 @@
-import React, { FC } from 'react';
-import { cx, css } from '@emotion/css';
-import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
-import Transition from 'react-transition-group/Transition';
-import { stylesFactory } from '@grafana/ui';
-import BodyPortal from './Portal';
-
-const getStyles = stylesFactory(() => ({
-  defaultTransitionStyles: css`
-    transition: opacity 200ms linear;
-    opacity: 0;
-  `,
-  tooltipContent: css`
-    overflow-wrap: break-word;
-  `,
-}));
-
-const transitionStyles = {
-  exited: { opacity: 0 },
-  entering: { opacity: 0 },
-  entered: { opacity: 1 },
-  exiting: { opacity: 0 },
-};
-
-interface Props {
-  renderContent: (content: any) => any;
-  show: boolean;
-  placement?: any;
-  content: string | ((props: any) => JSX.Element);
-  refClassName?: string;
-  popperClassName?: string;
-}
-
-const Popper: FC<Props> = ({ show, placement, popperClassName, refClassName, content, children, renderContent }) => {
-  const refClass = cx('popper_ref', refClassName);
-  const styles = getStyles();
-  const popperClass = cx('popper', popperClassName, styles.defaultTransitionStyles);
-
-  return (
-    <Manager>
-      <Reference>
-        {({ ref }) => (
-          <div className={refClass} ref={ref}>
-            {children}
-          </div>
-        )}
-      </Reference>
-      <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
-        {transitionState => (
-          <BodyPortal>
-            <ReactPopper placement={placement}>
-              {({ ref, style, placement, arrowProps }) => {
-                return (
-                  <div
-                    ref={ref}
-                    style={{
-                      ...style,
-                      ...transitionStyles[transitionState],
-                    }}
-                    data-placement={placement}
-                    className={popperClass}
-                  >
-                    <div className="popper__background">
-                      <div className={styles.tooltipContent}>
-                        {renderContent(content)}
-                      </div>
-                      <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
-                    </div>
-                  </div>
-                );
-              }}
-            </ReactPopper>
-          </BodyPortal>
-        )}
-      </Transition>
-    </Manager>
-  );
-};
-
-export default Popper;

src/components/Tooltip/Portal.tsx

@@ -1,36 +0,0 @@
-import { PureComponent } from 'react';
-import ReactDOM from 'react-dom';
-
-interface Props {
-  className?: string;
-  root?: HTMLElement;
-}
-
-export default class BodyPortal extends PureComponent<Props> {
-  node: HTMLElement;
-  portalRoot: HTMLElement;
-
-  constructor(props) {
-    super(props);
-    const {
-      className,
-      root = document.body
-    } = this.props;
-
-    this.node = document.createElement('div');
-    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);
-  }
-}

src/components/Tooltip/Tooltip.tsx

@@ -1,15 +0,0 @@
-import React, { FC } from 'react';
-import Popper from './Popper';
-import withPopper, { UsingPopperProps } from './withPopper';
-
-const TooltipWrapper: FC<UsingPopperProps> = ({ hidePopper, showPopper, className, children, ...restProps }) => {
-  return (
-    <div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
-      <Popper {...restProps}>{children}</Popper>
-    </div>
-  );
-};
-
-export const Tooltip = withPopper(TooltipWrapper);
-
-export default Tooltip;

src/components/Tooltip/withPopper.tsx

@@ -1,76 +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;
-  popperClassName?: string;
-}
-
-interface Props {
-  placement?: string;
-  className?: string;
-  refClassName?: string;
-  popperClassName?: string;
-  content: string | ((props: any) => JSX.Element);
-}
-
-interface State {
-  show: boolean;
-}
-
-export const withPopper = (WrappedComponent) => {
-  return class extends React.Component<Props, State> {
-    static defaultProps: Partial<Props> = {
-      placement: 'auto',
-    };
-
-    constructor(props) {
-      super(props);
-      this.state = {
-        show: false,
-      };
-    }
-
-    showPopper = () => {
-      this.setState({ show: true });
-    };
-
-    hidePopper = () => {
-      this.setState({ 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 } = this.state;
-      const { placement, className } = this.props;
-
-      return (
-        <WrappedComponent
-          {...this.props}
-          showPopper={this.showPopper}
-          hidePopper={this.hidePopper}
-          renderContent={this.renderContent}
-          placement={placement}
-          className={className}
-          show={show}
-        />
-      );
-    }
-  };
-};
-
-export default withPopper;

src/components/index.ts

@@ -3,5 +3,4 @@ export { FAIcon } from './FAIcon/FAIcon';
 export { AckButton } from './AckButton/AckButton';
 export { ExploreButton } from './ExploreButton/ExploreButton';
 export { ExecScriptButton } from './ExecScriptButton/ExecScriptButton';
-export { Tooltip } from './Tooltip/Tooltip';
 export { ModalController } from './Modal/ModalController';

src/panel-triggers/components/AlertList/AlertCard.tsx

@@ -9,8 +9,9 @@ import EventTag from '../EventTag';
 import AlertAcknowledges from './AlertAcknowledges';
 import AlertIcon from './AlertIcon';
 import { ProblemDTO, ZBXTag } from '../../../datasource-zabbix/types';
-import { ModalController, Tooltip } from '../../../components';
+import { ModalController } from '../../../components';
 import { DataSourceRef } from '@grafana/data';
+import { Tooltip } from '@grafana/ui';
 
 interface AlertCardProps {
   problem: ProblemDTO;
@@ -260,7 +261,7 @@ class AlertAcknowledgesButton extends PureComponent<AlertAcknowledgesButtonProps
     let content = null;
     if (problem.acknowledges && problem.acknowledges.length) {
       content = (
-        <Tooltip placement="bottom" popperClassName="ack-tooltip" content={this.renderTooltipContent}>
+        <Tooltip placement="bottom" content={this.renderTooltipContent}>
           <span><i className="fa fa-comments"></i></span>
         </Tooltip>
       );

src/panel-triggers/components/EventTag.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { ZBXTag } from '../types';
-import Tooltip from '../../components/Tooltip/Tooltip';
 import { DataSourceRef } from '@grafana/data';
+import { Tooltip } from '@grafana/ui';
 
 const TAG_COLORS = [
   '#E24D42',

src/panel-triggers/components/Problems/ProblemDetails.tsx

@@ -1,6 +1,7 @@
 import React, { FC, PureComponent } from 'react';
 import moment from 'moment';
 import { TimeRange, DataSourceRef } from "@grafana/data";
+import { Tooltip } from '@grafana/ui';
 import { getDataSourceSrv } from '@grafana/runtime';
 import * as utils from '../../../datasource-zabbix/utils';
 import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXGroup, ZBXHost, ZBXTag } from '../../../datasource-zabbix/types';
@@ -10,7 +11,7 @@ import { AckModal, AckProblemData } from '../AckModal';
 import EventTag from '../EventTag';
 import AcknowledgesList from './AcknowledgesList';
 import ProblemTimeline from './ProblemTimeline';
-import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController, Tooltip } from '../../../components';
+import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController } from '../../../components';
 import { ExecScriptData, ExecScriptModal } from '../ExecScriptModal';
 import ProblemStatusBar from "./ProblemStatusBar";
 

src/panel-triggers/components/Problems/ProblemStatusBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { Tooltip } from '@grafana/ui';
 import FAIcon from '../../../components/FAIcon/FAIcon';
-import Tooltip from '../../../components/Tooltip/Tooltip';
 import { ZBXTrigger, ZBXAlert } from '../../types';
 
 export interface ProblemStatusBarProps {