diff --git a/src/renderer/components/metric-bar/metric-bar.tsx b/src/renderer/components/metric-bar/metric-bar.tsx
index 88eb29bbd3..b60adc434f 100644
--- a/src/renderer/components/metric-bar/metric-bar.tsx
+++ b/src/renderer/components/metric-bar/metric-bar.tsx
@@ -7,8 +7,9 @@ import styles from "./metric-bar.module.scss";
 
 import React, { HTMLAttributes, ReactNode } from "react";
 import { VerticalBar } from "../vertical-bar";
-import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 import { cssNames } from "../../utils";
+import { uniqueId } from "lodash";
+import { Tooltip, TooltipDecoratorProps } from "../tooltip";
 
 interface BarProps extends HTMLAttributes<HTMLDivElement>, TooltipDecoratorProps {
   value: number;
@@ -20,21 +21,31 @@ interface BarProps extends HTMLAttributes<HTMLDivElement>, TooltipDecoratorProps
   warningPercentage?: number;
 }
 
-export const MetricBar = withTooltip((props: BarProps) => {
-  const { max, min = 0, showPercent = true, changeColorOnWarning = true, warningPercentage = 85, value, height } = props;
+export const MetricBar = (props: BarProps) => {
+  const {
+    max,
+    min = 0,
+    showPercent = true,
+    changeColorOnWarning = true,
+    warningPercentage = 85,
+    value,
+    height,
+    tooltip,
+  } = props;
   const percents = Math.min(100, value / (max - min) * 100);
   const percentsRounded = +percents.toFixed(2);
   const warning = percents > warningPercentage;
+  const id = props.id || uniqueId("tooltip_target_");
 
   return (
-    <div className={cssNames(styles.metricBar, props.className)} data-testid="metric-bar">
+    <div className={cssNames(styles.metricBar, props.className)} data-testid="metric-bar" id={id}>
       <VerticalBar
         value={percentsRounded}
         className={cssNames(styles.bar, { [styles.warning]: warning && changeColorOnWarning })}
         style={{ blockSize: height }}
       />
       {showPercent && <span>{percentsRounded}%</span>}
+      <Tooltip targetId={id} {...tooltip}/>
     </div>
   );
-});
-
+};