Repository: kestra-io/kestra
Issue: Tooltip on charts, should hide properly on mouseout
Labels: bug

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

Issue comments:

Pull request review comments:

Patch that resolved the issue:
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>
+


Test patch: