Merge pull request #15106 from grafana/tooltip-restyling

Tooltip restyling

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

 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

-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

 $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;
   }
 }
 
@@ -17,9 +19,11 @@ $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: 10px;
+  padding: 6px 10px;
+  color: $tooltipColor;
+  font-weight: 500;
 
   .popper__arrow {
     border-color: $tooltipBackground;
@@ -30,9 +34,8 @@ $popper-margin-from-ref: 5px;
     @include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
   }
 
-  &.popper__background--brand {
-    @include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand);
-    @include gradient-vertical($red, $orange);
+  &.popper__background--info {
+    @include popper-theme($popover-help-bg, $popover-help-color);
   }
 }
 

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>

public/app/features/dashboard/dashgrid/DataPanel.tsx

 // 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" />

public/app/features/dashboard/panel_editor/DataSourceOption.tsx

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

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>

public/sass/_variables.dark.scss

@@ -307,7 +307,8 @@ $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: $popover-help-bg;
+$tooltipBackground: $black;
+$tooltipColor: $gray-4;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;

public/sass/_variables.light.scss

@@ -311,7 +311,8 @@ $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
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;

public/sass/base/_icons.scss

@@ -12,7 +12,7 @@
 }
 
 .gicon--has-hover {
-  opacity: 0.5;
+  opacity: 0.7;
 
   &:hover {
     opacity: 1;

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 {

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