diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/endzone_tooltip_header.test.tsx.snap b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/endzone_tooltip_header.test.tsx.snap
index b0bf86d8aecb8..5ffe9204cc453 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/endzone_tooltip_header.test.tsx.snap
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/endzone_tooltip_header.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`EndzoneTooltipHeader should render endzone tooltip with value, if it is
 <Fragment>
   <EuiFlexGroup
     alignItems="center"
-    className="detailedTooltip__header--partial"
+    css={[Function]}
     gutterSize="xs"
     responsive={false}
   >
@@ -32,7 +32,7 @@ exports[`EndzoneTooltipHeader should render endzone tooltip without value, if it
 <Fragment>
   <EuiFlexGroup
     alignItems="center"
-    className="detailedTooltip__header--partial"
+    css={[Function]}
     gutterSize="xs"
     responsive={false}
   >
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip.test.tsx.snap b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip.test.tsx.snap
index 034108bf7d345..84d3f21c3a251 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip.test.tsx.snap
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Tooltip should render plain tooltip 1`] = `
 <div
-  className="detailedTooltip"
+  css={[Function]}
 >
   <table>
     <tbody>
@@ -38,10 +38,10 @@ exports[`Tooltip should render plain tooltip 1`] = `
 
 exports[`Tooltip should render tooltip with partial buckets 1`] = `
 <div
-  className="detailedTooltip"
+  css={[Function]}
 >
   <div
-    className="detailedTooltip__header"
+    css={[Function]}
   >
     <EndzoneTooltipHeader />
   </div>
@@ -79,10 +79,10 @@ exports[`Tooltip should render tooltip with partial buckets 1`] = `
 
 exports[`Tooltip should render tooltip with partial buckets 2`] = `
 <div
-  className="detailedTooltip"
+  css={[Function]}
 >
   <div
-    className="detailedTooltip__header"
+    css={[Function]}
   >
     <EndzoneTooltipHeader />
   </div>
@@ -120,7 +120,7 @@ exports[`Tooltip should render tooltip with partial buckets 2`] = `
 
 exports[`Tooltip should render tooltip with xDomain 1`] = `
 <div
-  className="detailedTooltip"
+  css={[Function]}
 >
   <table>
     <tbody>
@@ -156,7 +156,7 @@ exports[`Tooltip should render tooltip with xDomain 1`] = `
 
 exports[`Tooltip should render tooltip without split-column-values 1`] = `
 <div
-  className="detailedTooltip"
+  css={[Function]}
 >
   <table>
     <tbody>
@@ -187,7 +187,7 @@ exports[`Tooltip should render tooltip without split-column-values 1`] = `
 
 exports[`Tooltip should render tooltip without split-row-values 1`] = `
 <div
-  className="detailedTooltip"
+  css={[Function]}
 >
   <table>
     <tbody>
@@ -218,7 +218,7 @@ exports[`Tooltip should render tooltip without split-row-values 1`] = `
 
 exports[`Tooltip should render tooltip without splitAccessors-values 1`] = `
 <div
-  className="detailedTooltip"
+  css={[Function]}
 >
   <table>
     <tbody>
@@ -249,7 +249,7 @@ exports[`Tooltip should render tooltip without splitAccessors-values 1`] = `
 
 exports[`Tooltip should render tooltip without x-value 1`] = `
 <div
-  className="detailedTooltip"
+  css={[Function]}
 >
   <table>
     <tbody>
@@ -280,7 +280,7 @@ exports[`Tooltip should render tooltip without x-value 1`] = `
 
 exports[`Tooltip should render tooltip without x-value 2`] = `
 <div
-  className="detailedTooltip"
+  css={[Function]}
 >
   <table>
     <tbody>
@@ -311,7 +311,7 @@ exports[`Tooltip should render tooltip without x-value 2`] = `
 
 exports[`Tooltip should render tooltip without y-value 1`] = `
 <div
-  className="detailedTooltip"
+  css={[Function]}
 >
   <table>
     <tbody>
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip_row.test.tsx.snap b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip_row.test.tsx.snap
index 01fed10a23fcd..0e0823446c33c 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip_row.test.tsx.snap
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip_row.test.tsx.snap
@@ -3,19 +3,27 @@
 exports[`TooltipRow should render label and value if both are specified 1`] = `
 <tr>
   <td
-    className="detailedTooltip__label"
+    css={[Function]}
   >
     <div
-      className="detailedTooltip__labelContainer"
+      css={[Function]}
     >
       tooltip
     </div>
   </td>
-  <td
-    className="detailedTooltip__value"
-  >
+  <td>
     <div
-      className="detailedTooltip__valueContainer"
+      css={
+        Object {
+          "map": undefined,
+          "name": "us16fb",
+          "next": undefined,
+          "styles": "
+            overflow-wrap: break-word;
+          ",
+          "toString": [Function],
+        }
+      }
     >
       0
     </div>
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/endzone_tooltip_header.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/endzone_tooltip_header.tsx
index a87c8a19e05b0..ce72f8a1935f0 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/endzone_tooltip_header.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/endzone_tooltip_header.tsx
@@ -8,8 +8,9 @@
  */
 
 import React, { FC } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, type UseEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 
 export interface EndzoneTooltipHeaderProps {
   value?: string;
@@ -19,7 +20,10 @@ export const EndzoneTooltipHeader: FC<EndzoneTooltipHeaderProps> = ({ value }) =
   <>
     <EuiFlexGroup
       alignItems="center"
-      className="detailedTooltip__header--partial"
+      css={({ euiTheme }: UseEuiTheme) => css`
+        font-weight: ${euiTheme.font.weight.regular};
+        min-width: calc(${euiTheme.size.base} * 12);
+      `}
       responsive={false}
       gutterSize="xs"
     >
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.scss b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.scss
deleted file mode 100644
index 95eb4bae87c1d..0000000000000
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.detailedTooltip {
-  pointer-events: none;
-  @include euiToolTipStyle('s');
-  & { // stylelint-disable-line no-duplicate-selectors
-    max-width: $euiSizeXL * 10;
-    overflow: hidden;
-    padding: $euiSizeS;
-  }
-  table {
-    table-layout: fixed;
-    width: 100%;
-
-    td,
-    th {
-      text-align: left;
-      padding: $euiSizeXS;
-      overflow-wrap: break-word;
-    }
-  }
-}
-
-.detailedTooltip__header {
-  > :last-child {
-    margin-bottom: $euiSizeS;
-  }
-}
-
-.detailedTooltip__labelContainer {
-  max-width: $euiSizeXL * 5;
-}
-
-.detailedTooltip__labelContainer,
-.detailedTooltip__valueContainer {
-  overflow-wrap: break-word;
-}
-
-.detailedTooltip__label {
-  font-weight: $euiFontWeightMedium;
-  color: shade($euiColorGhost, 20%);
-}
-
-.detailedTooltip__header--partial {
-  font-weight: $euiFontWeightRegular;
-  min-width: $euiSize * 12;
-}
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.tsx
index 1c9f18e651d83..da2db9959af56 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.tsx
@@ -11,6 +11,8 @@ import { TooltipInfo, XYChartSeriesIdentifier } from '@elastic/charts';
 import { FormatFactory } from '@kbn/field-formats-plugin/common';
 import { getAccessorByDimension } from '@kbn/visualizations-plugin/common/utils';
 import React, { FC } from 'react';
+import { euiFontSize, euiShadow, type UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { CommonXYDataLayerConfig } from '../../../common';
 import {
   DatatablesWithFormatInfo,
@@ -23,8 +25,6 @@ import { EndzoneTooltipHeader } from './endzone_tooltip_header';
 import { TooltipData, TooltipRow } from './tooltip_row';
 import { isEndzoneBucket } from './utils';
 
-import './tooltip.scss';
-
 type Props = TooltipInfo & {
   xDomain?: XDomain;
   fieldFormats: LayersFieldFormats;
@@ -126,9 +126,9 @@ export const Tooltip: FC<Props> = ({
   const renderEndzoneTooltip = header ? isEndzoneBucket(header?.value, xDomain) : false;
 
   return (
-    <div className="detailedTooltip">
+    <div css={styles.customToolTip}>
       {renderEndzoneTooltip && (
-        <div className="detailedTooltip__header">
+        <div css={styles.header}>
           <EndzoneTooltipHeader />
         </div>
       )}
@@ -138,3 +138,42 @@ export const Tooltip: FC<Props> = ({
     </div>
   );
 };
+
+const styles = {
+  header: ({ euiTheme }: UseEuiTheme) => css`
+    > :last-child {
+      margin-bottom: ${euiTheme.size.s};
+    }
+  `,
+
+  customToolTip: (euiThemeContext: UseEuiTheme) =>
+    css`
+      z-index: ${euiThemeContext.euiTheme.levels.toast};
+      pointer-events: none;
+
+      padding: ${euiThemeContext.euiTheme.size.s};
+      border-radius: ${euiThemeContext.euiTheme.border.radius.medium};
+      max-width: calc(${euiThemeContext.euiTheme.size.xl} * 10);
+      overflow: hidden;
+      border: ${euiThemeContext.euiTheme.border.width.thin} solid
+        ${euiThemeContext.euiTheme.components.tooltipBorderFloating};
+
+      ${euiFontSize(euiThemeContext, 's')}
+      color: ${euiThemeContext.euiTheme.colors.textParagraph};
+
+      ${euiShadow(euiThemeContext)}
+      background-color: ${euiThemeContext.euiTheme.colors.backgroundBasePlain};
+
+      table {
+        table-layout: fixed;
+        width: 100%;
+
+        td,
+        th {
+          text-align: left;
+          padding: ${euiThemeContext.euiTheme.size.xs};
+          overflow-wrap: break-word;
+        }
+      }
+    `,
+};
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip_row.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip_row.tsx
index 1c0596d3b2935..182f66881cb10 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip_row.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip_row.tsx
@@ -7,6 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import { css } from '@emotion/react';
 import React, { FC } from 'react';
 
 export interface TooltipData {
@@ -17,12 +18,31 @@ export interface TooltipData {
 export const TooltipRow: FC<TooltipData> = ({ label, value }) => {
   return label && value ? (
     <tr>
-      <td className="detailedTooltip__label">
-        <div className="detailedTooltip__labelContainer">{label}</div>
+      <td
+        css={({ euiTheme }) => css`
+          font-weight: ${euiTheme.font.weight.medium};
+        `}
+      >
+        <div
+          css={({ euiTheme }) =>
+            css`
+              max-width: calc(${euiTheme.size.xl} * 5);
+              overflow-wrap: break-word;
+            `
+          }
+        >
+          {label}
+        </div>
       </td>
 
-      <td className="detailedTooltip__value">
-        <div className="detailedTooltip__valueContainer">{value}</div>
+      <td>
+        <div
+          css={css`
+            overflow-wrap: break-word;
+          `}
+        >
+          {value}
+        </div>
       </td>
     </tr>
   ) : null;