Fix: Make the JSON in JSONCell Tooltip more visible (#26048)

* add white background to tooltip component

* remove faulty background

* new theme for tooltip

* correct colors, remove custom box-shadow

* rename theme and add documentation

* use useStyles for style memo

packages/grafana-ui/src/components/Table/JSONViewCell.tsx

 import React, { FC } from 'react';
 import React, { FC } from 'react';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
-import { TableCellProps } from './types';
+import { isString } from 'lodash';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
 import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
-import { isString } from 'lodash';
+import { useStyles } from '../../themes';
+import { TableCellProps } from './types';
+import { GrafanaTheme } from '@grafana/data';
 
 
 export const JSONViewCell: FC<TableCellProps> = props => {
 export const JSONViewCell: FC<TableCellProps> = props => {
   const { field, cell, tableStyles } = props;
   const { field, cell, tableStyles } = props;
@@ -29,7 +31,7 @@ export const JSONViewCell: FC<TableCellProps> = props => {
   const content = <JSONTooltip value={value} />;
   const content = <JSONTooltip value={value} />;
   return (
   return (
     <div className={cx(txt, tableStyles.tableCell)}>
     <div className={cx(txt, tableStyles.tableCell)}>
-      <Tooltip placement="auto" content={content} theme={'info'}>
+      <Tooltip placement="auto" content={content} theme="info-alt">
         <div className={tableStyles.overflow}>{displayValue}</div>
         <div className={tableStyles.overflow}>{displayValue}</div>
       </Tooltip>
       </Tooltip>
     </div>
     </div>
@@ -41,12 +43,19 @@ interface PopupProps {
 }
 }
 
 
 const JSONTooltip: FC<PopupProps> = props => {
 const JSONTooltip: FC<PopupProps> = props => {
-  const clazz = css`
-    padding: 10px;
-  `;
+  const styles = useStyles((theme: GrafanaTheme) => {
+    return {
+      container: css`
+        padding: ${theme.spacing.xs};
+      `,
+    };
+  });
+
   return (
   return (
-    <div className={clazz}>
-      <JSONFormatter json={props.value} open={4} />
+    <div className={styles.container}>
+      <div>
+        <JSONFormatter json={props.value} open={4} />
+      </div>
     </div>
     </div>
   );
   );
 };
 };

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

+import { Props } from '@storybook/addon-docs/blocks';
+import { Tooltip } from './Tooltip';
+
+# Tooltip
+
+## Theme
+There are currently themes available for the Tooltip.
+
+- Info
+- Error
+- Info-alt (alternative)
+
+### Info
+This is the default theme, usually used in forms to show more information.
+
+### Error
+Tooltip with a red background.
+
+### Info alternative
+We added this to be able to add a `<JSONFormatter />` in the tooltip.
+
+<Props of={Tooltip } />

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

+import React from 'react';
+import { select } from '@storybook/addon-knobs';
+import { Tooltip } from './Tooltip';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { Button } from '../Button';
+import mdx from '../Tooltip/Tooltip.mdx';
+
+export default {
+  title: 'Overlays/Tooltip',
+  component: Tooltip,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const basic = () => {
+  const VISUAL_GROUP = 'Visual options';
+  // ---
+  const theme = select('Theme', ['info', 'error', 'info-alt'], 'info', VISUAL_GROUP);
+  return (
+    <Tooltip content="This is a tooltip" theme={theme}>
+      <Button>Hover me for Tooltip </Button>
+    </Tooltip>
+  );
+};

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

-import React, { createRef } from 'react';
+import React, { createRef, FC } from 'react';
 import * as PopperJS from 'popper.js';
 import * as PopperJS from 'popper.js';
 import { Popover } from './Popover';
 import { Popover } from './Popover';
 import { PopoverController, UsingPopperProps } from './PopoverController';
 import { PopoverController, UsingPopperProps } from './PopoverController';
 
 
 export interface TooltipProps extends UsingPopperProps {
 export interface TooltipProps extends UsingPopperProps {
-  theme?: 'info' | 'error';
+  theme?: 'info' | 'error' | 'info-alt';
 }
 }
 
 
 export interface PopoverContentProps {
 export interface PopoverContentProps {
@@ -13,7 +13,7 @@ export interface PopoverContentProps {
 
 
 export type PopoverContent = string | React.ReactElement<any> | ((props: PopoverContentProps) => JSX.Element);
 export type PopoverContent = string | React.ReactElement<any> | ((props: PopoverContentProps) => JSX.Element);
 
 
-export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) => {
+export const Tooltip: FC<TooltipProps> = ({ children, theme, ...controllerProps }: TooltipProps) => {
   const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
   const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
   const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
   const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
 
 

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

@@ -47,6 +47,10 @@ $popper-margin-from-ref: 5px;
   &.popper__background--info {
   &.popper__background--info {
     @include popper-theme($popover-help-bg, $popover-help-color);
     @include popper-theme($popover-help-bg, $popover-help-color);
   }
   }
+
+  &.popper__background--info-alt {
+    @include popper-theme($popover-code-bg, $text-color);
+  }
 }
 }
 
 
 .popper__arrow {
 .popper__arrow {

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -300,6 +300,9 @@ $popover-help-bg: $tooltipBackground;
 $popover-help-color: $text-color;
 $popover-help-color: $text-color;
 $popover-error-bg: $btn-danger-bg;
 $popover-error-bg: $btn-danger-bg;
 
 
+$popover-code-bg: $popover-bg;
+$popover-code-boxshadow: $tooltipShadow;
+
 // images
 // images
 $checkboxImageUrl: '../img/checkbox.png';
 $checkboxImageUrl: '../img/checkbox.png';
 
 

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -293,6 +293,9 @@ $popover-error-bg: $btn-danger-bg;
 $popover-help-bg: $tooltipBackground;
 $popover-help-bg: $tooltipBackground;
 $popover-help-color: $tooltipColor;
 $popover-help-color: $tooltipColor;
 
 
+$popover-code-bg: ${theme.colors.bg1};
+$popover-code-boxshadow: 0 0 5px $gray60;
+
 // images
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';
 $checkboxImageUrl: '../img/checkbox_white.png';
 
 

public/sass/_variables.dark.generated.scss

@@ -302,6 +302,9 @@ $popover-help-bg: $tooltipBackground;
 $popover-help-color: $text-color;
 $popover-help-color: $text-color;
 $popover-error-bg: $btn-danger-bg;
 $popover-error-bg: $btn-danger-bg;
 
 
+$popover-code-bg: $popover-bg;
+$popover-code-boxshadow: $tooltipShadow;
+
 // images
 // images
 $checkboxImageUrl: '../img/checkbox.png';
 $checkboxImageUrl: '../img/checkbox.png';
 
 

public/sass/_variables.light.generated.scss

@@ -295,6 +295,9 @@ $popover-error-bg: $btn-danger-bg;
 $popover-help-bg: $tooltipBackground;
 $popover-help-bg: $tooltipBackground;
 $popover-help-color: $tooltipColor;
 $popover-help-color: $tooltipColor;
 
 
+$popover-code-bg: #ffffff;
+$popover-code-boxshadow: 0 0 5px $gray60;
+
 // images
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';
 $checkboxImageUrl: '../img/checkbox_white.png';