Fix bar chart tooltips: consistent hover/click + Svelte 5 mount API

ui/src/lib/BarChart.svelte

@@ -128,7 +128,7 @@
                             {/if}
                         {/if}
                         </g>
-                        <g>
+                        <g data-title="{point.title2}" use:tooltip>
                         {#if point.value2 > 0.0001}
                             <rect
                                 x="{xScale(i) + 2}"
@@ -146,9 +146,6 @@
                                     transform="translate({xScale(i) + (barWidth/2)} {yScale(-point.value2) < yScale(0) + 15 ? yScale(-point.value2) + 15 : yScale(-point.value2) - 14}) rotate({barWidth < vertSwitch ? 90 : 0})"
                                     use:fitText={barWidth >= vertSwitch ? barWidth * 0.95 : null}
                                 >{point.label2}</text>
-                                {#if point.title2}
-                                <title>{point.title2}</title>
-                                {/if}
                             {/if}
                         {/if}
                         </g>

ui/src/lib/tooltip.js

@@ -1,40 +1,65 @@
+import { mount, unmount } from 'svelte';
 import Tooltip from './Tooltip.svelte';
 
+// How long the pointer must dwell on a bar before a hover tooltip appears.
+// Click (and mobile tap, which synthesizes a click) shows it immediately.
+const HOVER_DELAY = 500;
+
 export function tooltip(element) {
 	let title;
 	let tooltipComponent;
-
-    function click(event) {
-        if(tooltipComponent) tooltipComponent.$destroy();
+	let hideTimer;
+	let showTimer;
+
+	function hide() {
+		if(tooltipComponent) {
+			unmount(tooltipComponent);
+			tooltipComponent = null;
+		}
+	}
+
+	function show() {
+        clearTimeout(showTimer);
+        clearTimeout(hideTimer);
+        hide();
 
 		title = element.dataset.title || element.getAttribute('title');
+		if(!title) return;
         var rect = element.getBoundingClientRect();
 
-		tooltipComponent = new Tooltip({
+		tooltipComponent = mount(Tooltip, {
+			target: document.body,
 			props: {
 				title: title,
 				x: rect.left + window.scrollX + (rect.width / 2),
 				y: rect.top + window.scrollY,
 			},
-			target: document.body,
 		});
 	}
 
+	function mouseEnter() {
+        clearTimeout(showTimer);
+        showTimer = setTimeout(show, HOVER_DELAY);
+	}
+
 	function mouseLeave() {
+        clearTimeout(showTimer);
         if(tooltipComponent) {
-            setTimeout(() => {
-                tooltipComponent.$destroy();
-                tooltipComponent = null;
-            }, 500);
+            hideTimer = setTimeout(hide, 500);
         }
 	}
-
-	element.addEventListener('click', click);
+
+	element.addEventListener('click', show);
+	element.addEventListener('mouseenter', mouseEnter);
     element.addEventListener('mouseleave', mouseLeave);
-	
+
 	return {
 		destroy() {
-			element.removeEventListener('click', click);
+            clearTimeout(showTimer);
+            clearTimeout(hideTimer);
+            hide();
+			element.removeEventListener('click', show);
+			element.removeEventListener('mouseenter', mouseEnter);
 			element.removeEventListener('mouseleave', mouseLeave);
 		}
 	}