Basic tooltips

src/lib/components/Bubble.svelte

@@ -0,0 +1,40 @@
+<script>
+  export let cx;
+  export let cy;
+  export let r;
+  export let fill;
+  export let opacity;
+  export let ttContent;
+  export let tooltipContent;
+  export let tooltipX;
+  export let tooltipY;
+  export let showTooltip;
+
+  function handleMouseOver(event) {
+    showTooltip = true;
+    tooltipX = event.clientX;
+    tooltipY = event.clientY;
+    tooltipContent = ttContent;
+  }
+  function handleMouseOut() {
+    showTooltip = false;
+  }
+</script>
+
+<circle
+  {cx}
+  {cy}
+  {r}
+  {fill}
+  {opacity}
+  on:mouseover={handleMouseOver}
+  on:focus={handleMouseOver}
+  on:mouseout={handleMouseOut}
+  on:blur={handleMouseOut}
+/>
+
+<style>
+  circle {
+    stroke: white;
+  }
+</style>

src/lib/components/Timeline.svelte

@@ -3,6 +3,8 @@
 	import { extent } from 'd3-array';
 	import { utcFormat } from 'd3-time-format';
 	import { fade } from 'svelte/transition';
+	import Bubble from '$lib/components/Bubble.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	export let cases;
 
@@ -44,6 +46,21 @@
 
 	let yScale = scalePoint(actorNations, [height - margins.bottom - margins.top, 0]).padding(1);
 	let colorScale = scaleOrdinal(actorNations, colors);
+
+	let showTooltip = false;
+	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}>
@@ -87,14 +104,19 @@
 				{#each cases as attrCase}
 					{#if attrCase.show}
 						<a href={'#case-' + attrCase.attribution_id} transition:fade>
-							<circle
+							<Bubble
 								cx={xScale(new Date(attrCase.attribution_date))}
 								cy={yScale(attrCase.actor_nation[0])}
 								r={6}
-								style:fill={colorScale(attrCase.actor_nation[0])}
+								fill={colorScale(attrCase.actor_nation[0])}
 								stroke={'#ffffff'}
 								stroke-width={2}
-							></circle>
+								ttContent={`<p class="countryname">${attrCase.short_description}</p>`}
+								bind:tooltipContent
+								bind:tooltipX
+								bind:tooltipY
+								bind:showTooltip
+							></Bubble>
 						</a>
 					{/if}
 				{/each}
@@ -123,6 +145,9 @@
 			</g>
 		{/if}
 	</svg>
+	{#if showTooltip}
+		<Tooltip {tooltipX} {tooltipY} {tooltipContent} />
+	{/if}
 </div>
 
 <style>

src/lib/components/Tooltip.svelte

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