diff --git a/public/locales/en-US.json b/public/locales/en-US.json
index 038361af0..334e129b5 100644
--- a/public/locales/en-US.json
+++ b/public/locales/en-US.json
@@ -45,8 +45,9 @@
     "label_threshold_infinite": "unlimited",
     "legendTooltip_cores": "{{product}} CPU usage, per CPU core.",
     "legendTooltip_coreHours": "{{product}} core hours usage.",
-    "legendTooltip_coreHours_OpenShift-dedicated-metrics": "OpenShift Dedicated core hours usage.",
-    "legendTooltip_instanceHours_OpenShift-dedicated-metrics": "OpenShift Dedicated instance hours usage.",
+    "legendTooltip_coreHours_OpenShift-dedicated-metrics": "OpenShift Dedicated <0>On-Demand</0> core hour usage.",
+    "legendTooltip_instanceHours_OpenShift-dedicated-metrics": "OpenShift Dedicated <0>On-Demand</0> instance hour usage.",
+    "legendTooltip_coreHours_OpenShift-metrics": "OpenShift Container Platform <0>On-Demand</0> core hour usage.",
     "legendTooltip_cloudSockets": "Public cloud {{product}} CPU usage, 1 CPU socket per instance.",
     "legendTooltip_hypervisorCores": "{{product}} CPU usage, per CPU core.",
     "legendTooltip_hypervisorSockets": "{{product}} CPU socket usage, per socket pair.",
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap
index 7044bd6ee..f5d309385 100644
--- a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap
+++ b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap
@@ -171,7 +171,7 @@ exports[`GraphCardChartLegend Component should render a basic component: basic 1
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_loremIpsum, {"product":"","context":""})
+        t(curiosity-graph.legendTooltip_loremIpsum, {"product":"","context":""}, [object Object])
       </p>
     }
     distance={5}
@@ -213,7 +213,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_loremIpsum, {"product":"test","context":"test"})
+        t(curiosity-graph.legendTooltip_loremIpsum, {"product":"test","context":"test"}, [object Object])
       </p>
     }
     distance={5}
@@ -250,7 +250,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_ametConsectetur, {"product":"test","context":"test"})
+        t(curiosity-graph.legendTooltip_ametConsectetur, {"product":"test","context":"test"}, [object Object])
       </p>
     }
     distance={5}
@@ -282,7 +282,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_threshold_dolorSit, {"product":"test","context":"test"})
+        t(curiosity-graph.legendTooltip_threshold_dolorSit, {"product":"test","context":"test"}, [object Object])
       </p>
     }
     distance={5}
@@ -319,7 +319,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_threshold_nonCursus, {"product":"test","context":"test"})
+        t(curiosity-graph.legendTooltip_threshold_nonCursus, {"product":"test","context":"test"}, [object Object])
       </p>
     }
     distance={5}
diff --git a/src/components/graphCard/graphCardChartLegend.js b/src/components/graphCard/graphCardChartLegend.js
index 3e3ad335d..0c742e0ae 100644
--- a/src/components/graphCard/graphCardChartLegend.js
+++ b/src/components/graphCard/graphCardChartLegend.js
@@ -121,10 +121,14 @@ class GraphCardChartLegend extends React.Component {
             }
           );
 
-          const tooltipContent = t(`curiosity-graph.legendTooltip${(isThreshold && '_threshold') || ''}_${id}`, {
-            product: productLabel,
-            context: productLabel
-          });
+          const tooltipContent = t(
+            `curiosity-graph.legendTooltip${(isThreshold && '_threshold') || ''}_${id}`,
+            {
+              product: productLabel,
+              context: productLabel
+            },
+            [<span style={{ whiteSpace: 'nowrap' }} />]
+          );
 
           return this.renderLegendItem({
             chartId: id,
diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
index 1b30af88c..4fe7a0f10 100644
--- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
+++ b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -62,7 +62,7 @@ Array [
       },
       Object {
         "key": "",
-        "match": "t(\`curiosity-graph.legendTooltip\${(isThreshold && '_threshold')",
+        "match": "t( \`curiosity-graph.legendTooltip\${(isThreshold && '_threshold')",
       },
     ],
   },
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0e9462c82..0d50c2eef 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,11 +1,5 @@
 // Framework
 @import '~@redhat-cloud-services/frontend-components-utilities/index';
-/**
- * FixMe: Variables break Sass compiler
- * Sass compiler throws an error when coming across the following syntax in
- *     --BackgroundUrl:url("d...
- * Workaround is to move the CSS files to ./src/index.js
- */
 @import '~@patternfly/patternfly/sass-utilities/all';
 
 // App