Fix tooltips

src/lib/components/Timeline.svelte

@@ -59,16 +59,6 @@
 	let tooltipContent;
 	let tooltipX;
 	let tooltipY;
-
-	function handleMouseOver(event) {
-		showTooltip = true;
-		tooltipX = event.clientX;
-		tooltipY = event.clientY;
-		tooltipContent = ttContent;
-	}
-	function handleMouseOut() {
-		showTooltip = false;
-	}
 </script>
 
 <div class="timeline-container" bind:clientWidth={width}>
@@ -171,7 +161,7 @@
 		{/if}
 	</svg>
 	{#if showTooltip}
-		<Tooltip {tooltipX} {tooltipY} {tooltipContent} />
+		<Tooltip {tooltipX} {tooltipY} {tooltipContent} {width}/>
 	{/if}
 </div>
 

src/lib/components/Tooltip.svelte

@@ -3,14 +3,16 @@
     export let tooltipX;
     export let tooltipY;
     export let tooltipContent;
+    export let width;
+
   </script>
   
   <div
     transition:fade="{{ duration: 250 }}"
     class="tooltip"
     style="
-        top:{tooltipY < 100 ? tooltipY + 60 : tooltipY - 40}px;
+        top:{tooltipY}px;
-        left:{tooltipX < 800 ? tooltipX - 30 : tooltipX - 360}px;
+        left:{tooltipX < width - 300 ? tooltipX + 10 : tooltipX - 300 - 10}px;
       "
   >
     {@html tooltipContent}
@@ -18,11 +20,11 @@
   
   <style>
     .tooltip {
-      position: absolute;
+      position: fixed;
       border: 1px solid #ccc;
       font-size: 13px;
       background: rgba(255, 255, 255, 0.95);
-      transform: translate(0%, -200%);
+      transform: translate(0%, -50%);
       padding: 5px;
       z-index: 1000;
       box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);

src/routes/+page.svelte

@@ -62,8 +62,7 @@
         })
 
         const metricsResponse = await csv('https://fiat-2024-processed-data.s3.us-west-2.amazonaws.com/fiat_country_metrics.csv')
-        //metrics = metricsResponse
+
-        //console.log(metrics)
         metrics = metricsResponse.map(d => {
             let obj = {}
             obj.date = new Date(d.Date),