From 1f66b5c7a9aa7c7eaa40016b75b1035a64d903bf Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Wed, 3 Feb 2021 12:50:02 +0100
Subject: [PATCH] Chart/Tooltip: refactored style declaration (#30824)

* Chart/Tooltip: added theme variables and refactored style declaration

* added some changes

* removed useStyle hook since we're not using themes variables

* Added useStyle back since it memoizes the style generation
---
 .../src/components/Chart/Tooltip.tsx          | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/Chart/Tooltip.tsx b/packages/grafana-ui/src/components/Chart/Tooltip.tsx
index 97fa90f2190..177d0c54119 100644
--- a/packages/grafana-ui/src/components/Chart/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Chart/Tooltip.tsx
@@ -4,6 +4,7 @@ import { Portal } from '../Portal/Portal';
 import { Dimensions, TimeZone } from '@grafana/data';
 import { FlotPosition } from '../Graph/types';
 import { TooltipContainer } from './TooltipContainer';
+import { useStyles } from '../../themes';
 
 export type TooltipMode = 'single' | 'multi' | 'none';
 
@@ -46,18 +47,10 @@ export interface TooltipProps {
 }
 
 export const Tooltip: React.FC<TooltipProps> = ({ content, position, offset }) => {
+  const styles = useStyles(getStyles);
   if (position) {
     return (
-      <Portal
-        className={css`
-          position: absolute;
-          top: 0;
-          left: 0;
-          pointer-events: none;
-          width: 100%;
-          height: 100%;
-        `}
-      >
+      <Portal className={styles.portal}>
         <TooltipContainer position={position} offset={offset || { x: 0, y: 0 }}>
           {content}
         </TooltipContainer>
@@ -68,3 +61,16 @@ export const Tooltip: React.FC<TooltipProps> = ({ content, position, offset }) =
 };
 
 Tooltip.displayName = 'ChartTooltip';
+
+const getStyles = () => {
+  return {
+    portal: css`
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      width: 100%;
+      height: 100%;
+    `,
+  };
+};