added some nice graphs to the tasks

webpage/src/lib/Tooltip.svelte

@@ -5,20 +5,20 @@
 	let x = $state(0);
 	let y = $state(0);
 
-    let div: HTMLDivElement;
+	let div: HTMLDivElement;
 
 	function mouseOver(event: MouseEvent) {
 		isHovered = true;
 		x = event.pageX + 5;
 		y = event.pageY + 5;
 	}
-    function focus() {
-        isHovered = true;
+	function focus() {
+		isHovered = true;
 
-        const box = div.getBoundingClientRect();
-        x = box.x + 5;
-        y = box.y;
-    }
+		const box = div.getBoundingClientRect();
+		x = box.x + 5;
+		y = box.y;
+	}
 	function mouseMove(event: MouseEvent) {
 		x = event.pageX + 5;
 		y = event.pageY + 5;
@@ -28,7 +28,15 @@
 	}
 </script>
 
-<div bind:this={div} on:mouseover={mouseOver} on:mouseleave={mouseLeave} on:mousemove={mouseMove} on:focus={focus} role="tooltip">
+<div
+	bind:this={div}
+	on:mouseover={mouseOver}
+	on:mouseleave={mouseLeave}
+	on:mousemove={mouseMove}
+	on:focus={focus}
+	role="tooltip"
+	class="tooltipContainer"
+>
 	<slot />
 </div>
 
@@ -37,6 +45,9 @@
 {/if}
 
 <style>
+	.tooltipContainer {
+		display: inline-block;
+	}
 	.tooltip {
 		border: 1px solid #ddd;
 		box-shadow: 1px 1px 1px #ddd;