Tooltip on charts, should hide properly on mouseout
On chart, we have tooltip that is not always removed on when the mouse leave the charts. 
We should hide it when leaving totally the charts area
ui/src/components/flows/FlowMetrics.vue ui/src/components/home/NamespaceTreeMap.vue ui/src/components/home/StatusPie.vue ui/src/components/stats/StateChart.vue
ui/src/components/flows/FlowMetrics.vue ui/src/components/home/NamespaceTreeMap.vue ui/src/components/home/StatusPie.vue ui/src/components/stats/StateChart.vue
diff --git a/ui/src/components/flows/FlowMetrics.vue b/ui/src/components/flows/FlowMetrics.vue
index 440f4411e9..f9acb2ccc7 100644
--- a/ui/src/components/flows/FlowMetrics.vue
+++ b/ui/src/components/flows/FlowMetrics.vue
@@ -74,7 +74,7 @@
                 :persistent="false"
                 :hide-after="0"
                 transition=""
-                :visible="tooltipContent !== undefined"
+                :popper-class="tooltipContent === '' ? 'd-none' : 'tooltip-stats'"
                 v-if="aggregatedMetric"
             >
                 <template #content>
diff --git a/ui/src/components/home/NamespaceTreeMap.vue b/ui/src/components/home/NamespaceTreeMap.vue
index 22ddb54f82..5107282be0 100644
--- a/ui/src/components/home/NamespaceTreeMap.vue
+++ b/ui/src/components/home/NamespaceTreeMap.vue
@@ -5,6 +5,7 @@
             :persistent="false"
             :hide-after="0"
             transition=""
+            :popper-class="tooltipContent === '' ? 'd-none' : 'tooltip-stats'"
         >
             <template #content>
                 <span v-html="tooltipContent" />
diff --git a/ui/src/components/home/StatusPie.vue b/ui/src/components/home/StatusPie.vue
index c4c857b6fc..c1cfd8cee5 100644
--- a/ui/src/components/home/StatusPie.vue
+++ b/ui/src/components/home/StatusPie.vue
@@ -6,6 +6,7 @@
             :persistent="false"
             :hide-after="0"
             transition=""
+            :popper-class="tooltipContent === '' ? 'd-none' : 'tooltip-stats'"
         >
             <template #content>
                 <span v-html="tooltipContent" />
diff --git a/ui/src/components/stats/StateChart.vue b/ui/src/components/stats/StateChart.vue
index f41317805b..e09e570e00 100644
--- a/ui/src/components/stats/StateChart.vue
+++ b/ui/src/components/stats/StateChart.vue
@@ -1,12 +1,11 @@
 <template>
     <div :class="'executions-charts' + (global ? (this.big ? ' big' : '') : ' mini')" v-if="dataReady">
         <el-tooltip
-            popper-class="tooltip-stats"
             :placement="(global ? 'bottom' : 'left')"
             :persistent="false"
             :hide-after="0"
             transition=""
-            :visible="tooltipContent !== ''"
+            :popper-class="tooltipContent === '' ? 'd-none' : 'tooltip-stats'"
         >
             <template #content>
                 <span v-html="tooltipContent" />
@@ -22,7 +21,6 @@
     import {BarChart} from "vue-chart-3";
     import Utils from "../../utils/utils.js";
     import {defaultConfig, tooltip, chartClick, backgroundFromState} from "../../utils/charts.js";
-    import State from "../../utils/state";
     import {useI18n} from "vue-i18n";
 
     export default defineComponent({
@@ -71,7 +69,7 @@
 
             const options = computed(() => defaultConfig({
                 onClick: (e, elements) => {
-                    if (elements.length > 0 && elements[0].index !== undefined && elements[0].datasetIndex !== undefined ) {
+                    if (elements.length > 0 && elements[0].index !== undefined && elements[0].datasetIndex !== undefined) {
                         chartClick(
                             moment,
                             router,
@@ -172,4 +170,5 @@
             };
         },
     });
-</script>
\ No newline at end of file
+</script>
+
