Tooltips and attribution links

src/lib/components/CaseCard.svelte

@@ -19,6 +19,7 @@
 	<div class="card-content">
 		<div class="content">
 			<p>{utcFormat('%B %d, %Y')(cardData.attribution_date)}</p>
+			<p><a href={cardData.attribution_url} target='_blank'>{cardData.source}</a></p>
 			<p>{cardData.short_description}</p>
 			<p>
 				<button class="button is-info is-small" on:click={sourceFilter.selectOne(cardData.source)}

src/lib/components/Square.svelte

@@ -0,0 +1,41 @@
+<script>
+  export let x;
+  export let y;
+  export let width;
+  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>
+
+<rect
+  x={x - width/2}
+  y={y - width/2}
+  {width}
+  height={width}
+  {fill}
+  {opacity}
+  on:mouseover={handleMouseOver}
+  on:focus={handleMouseOver}
+  on:mouseout={handleMouseOut}
+  on:blur={handleMouseOut}
+/>
+
+<style>
+  rect {
+    stroke: white;
+  }
+</style>

src/lib/components/Timeline.svelte

@@ -4,6 +4,7 @@
 	import { utcFormat } from 'd3-time-format';
 	import { fade } from 'svelte/transition';
 	import Bubble from '$lib/components/Bubble.svelte';
+	import Square from '$lib/components/Square.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	export let cases;
@@ -131,15 +132,19 @@
 							stroke-width={2}
 							opacity={0.5}
 						></line>
-						<rect
-							x={xScale(event.date) - 6}
-							y={yScale('Key event') - 6}
+						<Square
+							x={xScale(event.date)}
+							y={yScale('Key event')}
 							width={12}
-							height={12}
 							fill={colorScale('Key event')}
 							stroke={'#ffffff'}
 							stroke-width={2}
-						></rect>
+							ttContent={`<p class="countryname">${event.title}</p>`}
+								bind:tooltipContent
+								bind:tooltipX
+								bind:tooltipY
+								bind:showTooltip
+						></Square>
 					{/each}
 				{/if}
 			</g>

src/lib/components/Tooltip.svelte

@@ -24,7 +24,7 @@
       background: rgba(255, 255, 255, 0.95);
       transform: translate(0%, -200%);
       padding: 5px;
-      z-index: 15;
+      z-index: 1000;
       box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
       width: 300px;
     }