diff --git a/x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss b/x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss
deleted file mode 100644
index 9f9f16dff7e13..0000000000000
--- a/x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.mlChartTooltip {
-  @include euiToolTipStyle('s');
-  @include euiFontSizeXS;
-  padding: 0;
-  transition: opacity $euiAnimSpeedNormal;
-  pointer-events: none;
-  user-select: none;
-  max-width: 512px;
-
-  &__list {
-    margin: $euiSizeXS;
-    padding-bottom: $euiSizeXS;
-  }
-
-  &__header {
-    font-weight: $euiFontWeightBold;
-    padding: $euiSizeXS ($euiSizeXS * 2);
-    margin-bottom: $euiSizeXS;
-    border-bottom: $euiBorderThin solid transparentize($euiBorderColor, .8);
-  }
-
-  &__item {
-    display: flex;
-    padding: 3px;
-    box-sizing: border-box;
-    border-left: $euiSizeXS solid transparent;
-  }
-
-  &__label {
-    min-width: 1px;
-  }
-
-  &__value {
-    font-weight: $euiFontWeightBold;
-    text-align: right;
-    font-feature-settings: 'tnum';
-    margin-left: 8px;
-  }
-
-  &__rowHighlighted {
-    background-color: transparentize($euiColorGhost, .9);
-  }
-
-  &--hidden {
-    opacity: 0;
-  }
-}
diff --git a/x-pack/plugins/ml/public/application/components/chart_tooltip/_index.scss b/x-pack/plugins/ml/public/application/components/chart_tooltip/_index.scss
deleted file mode 100644
index 11b36a0a21001..0000000000000
--- a/x-pack/plugins/ml/public/application/components/chart_tooltip/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'chart_tooltip';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
index 0c6fe9095f4e2..f279175d01107 100644
--- a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
+++ b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
@@ -9,14 +9,14 @@ import type { FC } from 'react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import TooltipTrigger from 'react-popper-tooltip';
+import type { ChildrenArg, TooltipTriggerProps } from 'react-popper-tooltip/dist/types';
+
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import type { TooltipValueFormatter } from '@elastic/charts';
 
-import './_index.scss';
-
-import type { ChildrenArg, TooltipTriggerProps } from 'react-popper-tooltip/dist/types';
 import type { ChartTooltipValue, TooltipData } from './chart_tooltip_service';
 import { ChartTooltipService } from './chart_tooltip_service';
+import { useChartTooltipStyles } from './chart_tooltip_styles';
 
 const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFormatter) => {
   if (!headerData) {
@@ -30,17 +30,26 @@ const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFo
  * Pure component for rendering the tooltip content with a custom layout across the ML plugin.
  */
 export const FormattedTooltip: FC<{ tooltipData: TooltipData }> = ({ tooltipData }) => {
+  const {
+    mlChartTooltip,
+    mlChartTooltipList,
+    mlChartTooltipHeader,
+    mlChartTooltipItem,
+    mlChartTooltipLabel,
+    mlChartTooltipValue,
+  } = useChartTooltipStyles();
+
   return (
-    <div className="mlChartTooltip">
+    <div css={mlChartTooltip}>
       {tooltipData.length > 0 && tooltipData[0].skipHeader === undefined && (
-        <div className="mlChartTooltip__header">{renderHeader(tooltipData[0])}</div>
+        <div css={mlChartTooltipHeader}>{renderHeader(tooltipData[0])}</div>
       )}
       {tooltipData.length > 1 && (
-        <div className="mlChartTooltip__list">
+        <div css={mlChartTooltipList}>
           {tooltipData
             .slice(1)
             .map(({ label, value, color, isHighlighted, seriesIdentifier, valueAccessor }) => {
-              const classes = classNames('mlChartTooltip__item', {
+              const classes = classNames({
                 // eslint-disable-next-line @typescript-eslint/naming-convention
                 echTooltip__rowHighlighted: isHighlighted,
               });
@@ -52,16 +61,21 @@ export const FormattedTooltip: FC<{ tooltipData: TooltipData }> = ({ tooltipData
               return (
                 <div
                   key={`${seriesIdentifier.key}__${valueAccessor}`}
+                  css={mlChartTooltipItem}
                   className={classes}
                   style={{
                     borderLeftColor: color,
                   }}
                 >
                   <EuiFlexGroup>
-                    <EuiFlexItem className="eui-textBreakWord mlChartTooltip__label" grow={false}>
+                    <EuiFlexItem
+                      css={mlChartTooltipLabel}
+                      className="eui-textBreakWord"
+                      grow={false}
+                    >
                       {label}
                     </EuiFlexItem>
-                    <EuiFlexItem className="eui-textBreakAll mlChartTooltip__value">
+                    <EuiFlexItem css={mlChartTooltipValue} className="eui-textBreakAll">
                       {renderValue}
                     </EuiFlexItem>
                   </EuiFlexGroup>
diff --git a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip_styles.ts b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip_styles.ts
new file mode 100644
index 0000000000000..c53bdb5242f3c
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip_styles.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { css } from '@emotion/react';
+
+import { mathWithUnits, transparentize, useEuiTheme } from '@elastic/eui';
+// @ts-expect-error style types not defined
+import { euiToolTipStyles } from '@elastic/eui/lib/components/tool_tip/tool_tip.styles';
+
+import { useCurrentEuiThemeVars } from '@kbn/ml-kibana-theme';
+
+import { useMlKibana } from '../../contexts/kibana';
+
+export const useChartTooltipStyles = () => {
+  const euiThemeContext = useEuiTheme();
+  const {
+    services: { theme },
+  } = useMlKibana();
+  const { euiTheme } = useCurrentEuiThemeVars(theme);
+  const euiStyles = euiToolTipStyles(euiThemeContext);
+
+  return {
+    mlChartTooltip: css([
+      euiStyles.euiToolTip,
+      {
+        fontSize: euiTheme.euiFontSizeXS,
+        padding: 0,
+        transition: `opacity ${euiTheme.euiAnimSpeedNormal}`,
+        pointerEvents: 'none',
+        userSelect: 'none',
+        maxWidth: '512px',
+        position: 'relative',
+      },
+    ]),
+    mlChartTooltipList: css({
+      margin: euiTheme.euiSizeXS,
+      paddingBottom: euiTheme.euiSizeXS,
+    }),
+    mlChartTooltipHeader: css({
+      fontWeight: euiTheme.euiFontWeightBold,
+      padding: `${euiTheme.euiSizeXS} ${mathWithUnits(euiTheme.euiSizeS, (x) => x * 2)}`,
+      marginBottom: euiTheme.euiSizeXS,
+      borderBottom: `1px solid ${transparentize(euiTheme.euiBorderColor, 0.8)}`,
+    }),
+    mlChartTooltipItem: css({
+      display: 'flex',
+      padding: '3px',
+      boxSizing: 'border-box',
+      borderLeft: `${euiTheme.euiSizeXS} solid transparent`,
+    }),
+    mlChartTooltipLabel: css({
+      minWidth: '1px',
+    }),
+    mlChartTooltipValue: css({
+      fontWeight: euiTheme.euiFontWeightBold,
+      textAlign: 'right',
+      fontFeatureSettings: 'tnum',
+      marginLeft: '8px',
+    }),
+  };
+};