Progress on tooltip style update

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

@@ -1,6 +1,6 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
-import { Tooltip } from '..';
+import { Tooltip } from '../Tooltip/Tooltip';
 
 interface Props {
   children: ReactNode;
@@ -31,9 +31,9 @@ export const FormLabel: FunctionComponent<Props> = ({
     <label className={classes} {...rest} htmlFor={htmlFor}>
       {children}
       {tooltip && (
-        <Tooltip placement="auto" content={tooltip}>
-          <div className="gf-form-help-icon--right-normal">
-            <i className="gicon gicon-question gicon--has-hover" />
+        <Tooltip placement="top" content={tooltip} theme={"info"}>
+          <div className="gf-form-help-icon gf-form-help-icon--right-normal">
+            <i className="fa fa-info-circle" />
           </div>
         </Tooltip>
       )}

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

@@ -1,20 +1,14 @@
-import React, { createRef } from 'react';
+import React, { createRef } from 'react';
 import * as PopperJS from 'popper.js';
 import Popper from './Popper';
 import PopperController, { UsingPopperProps } from './PopperController';
 
-export enum Themes {
-  Default = 'popper__background--default',
-  Error = 'popper__background--error',
-  Brand = 'popper__background--brand',
-}
-
 interface TooltipProps extends UsingPopperProps {
-  theme?: Themes;
+  theme?: 'info' | 'error';
 }
 export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) => {
   const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
-  const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
+  const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
 
   return (
     <PopperController {...controllerProps}>

packages/grafana-ui/src/components/Tooltip/_Tooltip.scss

@@ -1,9 +1,11 @@
 $popper-margin-from-ref: 5px;
 
-@mixin popper-theme($backgroundColor, $arrowColor) {
+@mixin popper-theme($backgroundColor, $textColor) {
   background: $backgroundColor;
+  color: $textColor;
+
   .popper__arrow {
-    border-color: $arrowColor;
+    border-color: $backgroundColor;
   }
 }
 
@@ -19,7 +21,7 @@ $popper-margin-from-ref: 5px;
   background: $tooltipBackground;
   border-radius: $border-radius-sm;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  padding: 4px 8px;
+  padding: 6px 10px;
   color: $tooltipColor;
   font-weight: 500;
 
@@ -32,10 +34,9 @@ $popper-margin-from-ref: 5px;
     @include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
   }
 
-  /*&.popper__background--brand {
-    @include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand);
-    @include gradient-vertical($tooltipBackground, $tooltipBackground);
-  }*/
+  &.popper__background--info {
+    @include popper-theme($popover-help-bg, $popover-help-color);
+  }
 }
 
 .popper__arrow {