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

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

@@ -4,6 +4,7 @@ import { Portal } from '../Portal/Portal';
 import { Dimensions, TimeZone } from '@grafana/data';
 import { Dimensions, TimeZone } from '@grafana/data';
 import { FlotPosition } from '../Graph/types';
 import { FlotPosition } from '../Graph/types';
 import { TooltipContainer } from './TooltipContainer';
 import { TooltipContainer } from './TooltipContainer';
+import { useStyles } from '../../themes';
 
 
 export type TooltipMode = 'single' | 'multi' | 'none';
 export type TooltipMode = 'single' | 'multi' | 'none';
 
 
@@ -46,18 +47,10 @@ export interface TooltipProps {
 }
 }
 
 
 export const Tooltip: React.FC<TooltipProps> = ({ content, position, offset }) => {
 export const Tooltip: React.FC<TooltipProps> = ({ content, position, offset }) => {
+  const styles = useStyles(getStyles);
   if (position) {
   if (position) {
     return (
     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 }}>
         <TooltipContainer position={position} offset={offset || { x: 0, y: 0 }}>
           {content}
           {content}
         </TooltipContainer>
         </TooltipContainer>
@@ -68,3 +61,16 @@ export const Tooltip: React.FC<TooltipProps> = ({ content, position, offset }) =
 };
 };
 
 
 Tooltip.displayName = 'ChartTooltip';
 Tooltip.displayName = 'ChartTooltip';
+
+const getStyles = () => {
+  return {
+    portal: css`
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      width: 100%;
+      height: 100%;
+    `,
+  };
+};