don't hide immediately when over padding

Author: brc-dd

lib/components/SChartBar.vue

@@ -33,6 +33,8 @@ const props = withDefaults(defineProps<{
 const chartRef = useTemplateRef('chart')
 const { width, height } = useElementSize(chartRef)
 
+let tooltipTimeout = 0
+
 // Function to render the chart
 function renderChart({
   clientWidth,
@@ -255,15 +257,19 @@ function renderChart({
 
     barGroups
       .on('pointerenter', (event: PointerEvent, d) => {
+        window.clearTimeout(tooltipTimeout)
         Tooltip
           .html(props.tooltipFormat(d, color(d)))
           .style('opacity', '1')
         updatePos(event)
       })
       .on('pointermove', updatePos)
       .on('pointerleave', () => {
-        Tooltip
-          .style('opacity', '0')
+        window.clearTimeout(tooltipTimeout)
+        tooltipTimeout = window.setTimeout(() => {
+          Tooltip
+            .style('opacity', '0')
+        }, 400)
       })
   }
 

lib/components/SChartPie.vue

@@ -42,6 +42,8 @@ const props = withDefaults(defineProps<{
 const chartRef = useTemplateRef('chart')
 const { width, height } = useElementSize(chartRef)
 
+let tooltipTimeout = 0
+
 // Function to render the chart
 function renderChart({
   clientWidth,
@@ -285,15 +287,19 @@ function renderChart({
 
     arcs
       .on('pointerenter', (event: PointerEvent, { data: d }) => {
+        window.clearTimeout(tooltipTimeout)
         Tooltip
           .html(props.tooltipFormat(d, color(d)))
           .style('opacity', '1')
         updatePos(event)
       })
       .on('pointermove', updatePos)
       .on('pointerleave', () => {
-        Tooltip
-          .style('opacity', '0')
+        window.clearTimeout(tooltipTimeout)
+        tooltipTimeout = window.setTimeout(() => {
+          Tooltip
+            .style('opacity', '0')
+        }, 400)
       })
   }