From 2ec55d0650dc2fa66e9bdb6bac4586cc7bd191cc Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Wed, 23 Jan 2019 13:28:39 +0100
Subject: [PATCH 1/5] changed color for label tooltips from blue/red-yellow
 gradient to black/white

---
 .../grafana-ui/src/components/Tooltip/_Tooltip.scss   | 11 +++++++++--
 public/sass/_variables.dark.scss                      |  2 ++
 public/sass/_variables.light.scss                     |  2 ++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
index c8fa099cce6..05246fbac0a 100644
--- a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
+++ b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
@@ -20,7 +20,13 @@ $popper-margin-from-ref: 5px;
   background: $tooltipBackground;
   border-radius: $border-radius;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  padding: 10px;
+  padding: 0px 8px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  //border: 1px #333333 solid;
+  color: $tooltipColor;
+  font-weight: 500;
 
   // Themes
   &.popper__background--error {
@@ -29,7 +35,7 @@ $popper-margin-from-ref: 5px;
 
   &.popper__background--brand {
     @include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand);
-    @include gradient-vertical($red, $orange);
+    @include gradient-vertical($tooltipBackground, $tooltipBackground);
   }
 }
 
@@ -39,6 +45,7 @@ $popper-margin-from-ref: 5px;
   border-style: solid;
   position: absolute;
   margin: 0px;
+  display: none;
 }
 
 .popper__arrow {
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index da6328b3c11..71fc8551dda 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -308,6 +308,8 @@ $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
 $tooltipBackground: $popover-help-bg;
+$tooltipBackground:#e9edf2;
+$tooltipColor: #52545c;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index cca183233be..59de9617a94 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -312,6 +312,8 @@ $tooltipLinkColor: lighten($popover-help-color, 5%);
 $graph-tooltip-bg: $gray-5;
 
 $tooltipBackground: $popover-help-bg;
+$tooltipBackground: #09090b;
+$tooltipColor: #ececec;
 $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;

From 8a9582dad5fdc21fbf6ef5115a0f4f296386cc4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 23 Jan 2019 13:54:34 +0100
Subject: [PATCH 2/5] minor updates

---
 packages/grafana-ui/src/components/Tooltip/_Tooltip.scss | 7 +------
 public/sass/_variables.dark.scss                         | 5 ++---
 public/sass/components/_tooltip.scss                     | 2 +-
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
index 05246fbac0a..37f6b83c73f 100644
--- a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
+++ b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
@@ -20,11 +20,7 @@ $popper-margin-from-ref: 5px;
   background: $tooltipBackground;
   border-radius: $border-radius;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  padding: 0px 8px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  //border: 1px #333333 solid;
+  padding: 3px 8px;
   color: $tooltipColor;
   font-weight: 500;
 
@@ -45,7 +41,6 @@ $popper-margin-from-ref: 5px;
   border-style: solid;
   position: absolute;
   margin: 0px;
-  display: none;
 }
 
 .popper__arrow {
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 71fc8551dda..bd9ab385bb9 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -307,9 +307,8 @@ $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: $popover-help-bg;
-$tooltipBackground:#e9edf2;
-$tooltipColor: #52545c;
+$tooltipBackground: $black;
+$tooltipColor: $text-color;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;
diff --git a/public/sass/components/_tooltip.scss b/public/sass/components/_tooltip.scss
index 650d8ba1b1a..09252fe4f54 100644
--- a/public/sass/components/_tooltip.scss
+++ b/public/sass/components/_tooltip.scss
@@ -8,8 +8,8 @@
   z-index: $zindex-tooltip;
   display: block;
   visibility: visible;
-  font-size: 11px;
   line-height: 1.4;
+  font-weight: 500;
   @include opacity(0);
 
   &.in {

From 30f27a966b5bf24b5a76657182a3f9f3cf6df978 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Wed, 23 Jan 2019 15:39:13 +0100
Subject: [PATCH 3/5] changed light-theme tool-tip to be a bit lighter, trying
 different paddings

---
 public/sass/_variables.dark.scss     | 4 ++--
 public/sass/_variables.light.scss    | 4 ++--
 public/sass/components/_tooltip.scss | 3 ++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index bd9ab385bb9..d5c2b36fa84 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -307,8 +307,8 @@ $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: $black;
-$tooltipColor: $text-color;
+$tooltipBackground: $dark-1;
+$tooltipColor: white;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 59de9617a94..0ba544e2c38 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -312,8 +312,8 @@ $tooltipLinkColor: lighten($popover-help-color, 5%);
 $graph-tooltip-bg: $gray-5;
 
 $tooltipBackground: $popover-help-bg;
-$tooltipBackground: #09090b;
-$tooltipColor: #ececec;
+$tooltipBackground: $gray-1;
+$tooltipColor: $gray-7;
 $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;
diff --git a/public/sass/components/_tooltip.scss b/public/sass/components/_tooltip.scss
index 09252fe4f54..6801f196d59 100644
--- a/public/sass/components/_tooltip.scss
+++ b/public/sass/components/_tooltip.scss
@@ -40,7 +40,8 @@
 // Wrapper for the tooltip content
 .tooltip-inner {
   max-width: 400px;
-  padding: 8px;
+  padding: 8px 16px;
+  padding: 4px 8px;
   color: $tooltipColor;
   text-align: center;
   text-decoration: none;

From fe51e8505061856f6eb9bd66bfdf4cd2e191f23a Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Tue, 29 Jan 2019 08:47:28 +0100
Subject: [PATCH 4/5] did some styling changes

---
 packages/grafana-ui/src/components/Tooltip/_Tooltip.scss | 8 ++++----
 public/sass/_variables.dark.scss                         | 4 ++--
 public/sass/_variables.light.scss                        | 1 -
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
index 37f6b83c73f..f697e281a49 100644
--- a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
+++ b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
@@ -18,9 +18,9 @@ $popper-margin-from-ref: 5px;
 
 .popper__background {
   background: $tooltipBackground;
-  border-radius: $border-radius;
+  border-radius: $border-radius-sm;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  padding: 3px 8px;
+  padding: 4px 8px;
   color: $tooltipColor;
   font-weight: 500;
 
@@ -29,10 +29,10 @@ $popper-margin-from-ref: 5px;
     @include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
   }
 
-  &.popper__background--brand {
+  /*&.popper__background--brand {
     @include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand);
     @include gradient-vertical($tooltipBackground, $tooltipBackground);
-  }
+  }*/
 }
 
 .popper__arrow {
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index d5c2b36fa84..7a4a815d594 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -307,8 +307,8 @@ $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: $dark-1;
-$tooltipColor: white;
+$tooltipBackground: $gray-1;
+$tooltipColor: $gray-6;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 0ba544e2c38..a8773234d02 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -311,7 +311,6 @@ $tooltipArrowWidth: 5px;
 $tooltipLinkColor: lighten($popover-help-color, 5%);
 $graph-tooltip-bg: $gray-5;
 
-$tooltipBackground: $popover-help-bg;
 $tooltipBackground: $gray-1;
 $tooltipColor: $gray-7;
 $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip

From 71d0fae3a9f09eb6a33c70b8aca9831a85f451da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 29 Jan 2019 13:42:29 +0100
Subject: [PATCH 5/5] Progress on tooltip style update

---
 .../src/components/FormLabel/FormLabel.tsx        |  8 ++++----
 .../grafana-ui/src/components/Tooltip/Tooltip.tsx | 12 +++---------
 .../src/components/Tooltip/_Tooltip.scss          | 15 ++++++++-------
 .../dashboard/components/DashNav/template.html    |  2 +-
 .../app/features/dashboard/dashgrid/DataPanel.tsx |  3 +--
 .../dashboard/panel_editor/DataSourceOption.tsx   | 10 ++++------
 .../dashboard/panel_editor/PanelEditor.tsx        |  3 +--
 public/sass/_variables.dark.scss                  |  4 ++--
 public/sass/base/_icons.scss                      |  2 +-
 public/sass/components/_gf-form.scss              |  4 ++++
 10 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
index 2bd4fbc153b..0cf7857b0d9 100644
--- a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
+++ b/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>
       )}
diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index 7a3a97c6fd1..9acc166ad5d 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+++ b/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}>
diff --git a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
index cdd0d1f58af..503b977bbf0 100644
--- a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
+++ b/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 {
diff --git a/public/app/features/dashboard/components/DashNav/template.html b/public/app/features/dashboard/components/DashNav/template.html
index 74e00fea798..e50a8cd0bff 100644
--- a/public/app/features/dashboard/components/DashNav/template.html
+++ b/public/app/features/dashboard/components/DashNav/template.html
@@ -37,7 +37,7 @@
 			<i class="fa fa-link"></i>
 		</a>
 
-		<button class="btn navbar-button navbar-button--settings" ng-click="ctrl.toggleSettings()" bs-tooltip="'Settings'" data-placement="bottom" ng-show="ctrl.dashboard.meta.showSettings">
+		<button class="btn navbar-button navbar-button--settings" ng-click="ctrl.toggleSettings()" bs-tooltip="'Dashboard Settings'" data-placement="bottom" ng-show="ctrl.dashboard.meta.showSettings">
 			<i class="fa fa-cog"></i>
 		</button>
 	</div>
diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index 753ef2964cd..a681428f4bd 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -1,7 +1,6 @@
 // Library
 import React, { Component } from 'react';
 import { Tooltip } from '@grafana/ui';
-import { Themes } from '@grafana/ui/src/components/Tooltip/Tooltip';
 
 import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary';
 
@@ -200,7 +199,7 @@ export class DataPanel extends Component<Props, State> {
       );
     } else if (loading === LoadingState.Error) {
       return (
-        <Tooltip content={errorMessage} placement="bottom-start" theme={Themes.Error}>
+        <Tooltip content={errorMessage} placement="bottom-start" theme="error">
           <div className="panel-info-corner panel-info-corner--error">
             <i className="fa" />
             <span className="panel-info-corner-inner" />
diff --git a/public/app/features/dashboard/panel_editor/DataSourceOption.tsx b/public/app/features/dashboard/panel_editor/DataSourceOption.tsx
index e4bbcfffe1d..08285960805 100644
--- a/public/app/features/dashboard/panel_editor/DataSourceOption.tsx
+++ b/public/app/features/dashboard/panel_editor/DataSourceOption.tsx
@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
-import { Tooltip } from '@grafana/ui';
+import React, { FC } from 'react';
+import { FormLabel } from '@grafana/ui';
 
 interface Props {
   label: string;
@@ -11,9 +11,9 @@ interface Props {
 }
 
 export const DataSourceOptions: FC<Props> = ({ label, placeholder, name, value, onChange, tooltipInfo }) => {
-  const dsOption = (
+  return (
     <div className="gf-form gf-form--flex-end">
-      <label className="gf-form-label">{label}</label>
+      <FormLabel tooltip={tooltipInfo}>{label}</FormLabel>
       <input
         type="text"
         className="gf-form-input width-6"
@@ -24,8 +24,6 @@ export const DataSourceOptions: FC<Props> = ({ label, placeholder, name, value,
       />
     </div>
   );
-
-  return tooltipInfo ? <Tooltip content={tooltipInfo}>{dsOption}</Tooltip> : dsOption;
 };
 
 export default DataSourceOptions;
diff --git a/public/app/features/dashboard/panel_editor/PanelEditor.tsx b/public/app/features/dashboard/panel_editor/PanelEditor.tsx
index 3588f7534b7..123204aa239 100644
--- a/public/app/features/dashboard/panel_editor/PanelEditor.tsx
+++ b/public/app/features/dashboard/panel_editor/PanelEditor.tsx
@@ -16,7 +16,6 @@ import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types/plugins';
 
 import { Tooltip } from '@grafana/ui';
-import { Themes } from '@grafana/ui/src/components/Tooltip/Tooltip';
 
 interface PanelEditorProps {
   panel: PanelModel;
@@ -139,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}`} placement="auto" theme={Themes.Brand}>
+        <Tooltip content={`${tab.text}`} placement="auto">
           <i className={`gicon gicon-${tab.id}${activeTab === tab.id ? '-active' : ''}`} />
         </Tooltip>
       </a>
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 7a4a815d594..56cdb829f69 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -307,8 +307,8 @@ $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: $gray-1;
-$tooltipColor: $gray-6;
+$tooltipBackground: $black;
+$tooltipColor: $gray-4;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;
diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss
index 3105e98fe35..a60259ac0f2 100644
--- a/public/sass/base/_icons.scss
+++ b/public/sass/base/_icons.scss
@@ -12,7 +12,7 @@
 }
 
 .gicon--has-hover {
-  opacity: 0.5;
+  opacity: 0.7;
 
   &:hover {
     opacity: 1;
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index e86b901bb79..bb753a1f8e6 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -384,6 +384,10 @@ $input-border: 1px solid $input-border-color;
   &--no-padding {
     padding-left: 0;
   }
+
+  &:hover {
+    color: $text-color;
+  }
 }
 
 select.gf-form-input ~ .gf-form-help-icon {