Card in tooltip

src/lib/components/Bubble.svelte

@@ -6,8 +6,8 @@
   export let opacity;
   export let stroke;
   export let strokeWidth;
-  export let ttContent;
-  export let tooltipContent;
+  export let caseData;
+  export let hoveredCaseData;
   export let tooltipX;
   export let tooltipY;
   export let showTooltip;
@@ -16,7 +16,8 @@
     showTooltip = true;
     tooltipX = event.clientX;
     tooltipY = event.clientY;
-    tooltipContent = ttContent;
+    //tooltipContent = ttContent;
+    hoveredCaseData = caseData;
   }
   function handleMouseOut() {
     showTooltip = false;

src/lib/components/CardModal.svelte

@@ -13,7 +13,7 @@
 	<div class="modal-background" on:click={closeModal}></div>
 	<div class="modal-content">
         {#if activeCaseData}
-		 <CaseCard cardData={activeCaseData} expanded={true} ></CaseCard>
+		<CaseCard cardData={activeCaseData} expanded={true} ></CaseCard>
         {/if}
 	</div>
     <div class="modal-close" on:click={closeModal}></div>

src/lib/components/Timeline.svelte

@@ -83,7 +83,7 @@
 
 	// Tooltip
 	let showTooltip = false;
-	let tooltipContent;
+	let hoveredCaseData;
 	let tooltipX;
 	let tooltipY;
 </script>
@@ -132,9 +132,9 @@
 								fill={actorNations.includes(attrCase.actor_nation[0]) ? colorScale(attrCase.actor_nation[0]) : colorScale('Other')}
 								stroke={'#ffffff'}
 								strokeWidth={1.5}
-								ttContent={`<p class="countryname">${attrCase.short_title}</p>`}
 								opacity={opacityScale(attrCase.attribution_score)}
-								bind:tooltipContent
+								caseData={attrCase}
+								bind:hoveredCaseData
 								bind:tooltipX
 								bind:tooltipY
 								bind:showTooltip
@@ -212,7 +212,7 @@
 				{/each}
 				{#if xScale}
 					{#each events as event}
-						<Square
+						<!--Square
 							x={xScale(event.date)}
 							y={32}
 							width={12}
@@ -225,14 +225,14 @@
 							bind:tooltipX
 							bind:tooltipY
 							bind:showTooltip
-						></Square>
+						></Square-->
 					{/each}
 				{/if}
 			</g>
 		{/if}
 	</svg>
 	{#if showTooltip}
-		<Tooltip {tooltipX} {tooltipY} {tooltipContent} {width}/>
+		<Tooltip {tooltipX} {tooltipY} {hoveredCaseData} {width}/>
 	{/if}
 </div>
 

src/lib/components/Tooltip.svelte

@@ -1,8 +1,10 @@
 <script>
     import { fade } from 'svelte/transition';
+    import CaseCard from '$lib/components/CaseCard.svelte';
+
     export let tooltipX;
     export let tooltipY;
-    export let tooltipContent;
+    export let hoveredCaseData;
     export let width;
 
   </script>
@@ -15,7 +17,7 @@
         left:{tooltipX < width - 300 ? tooltipX + 10 : tooltipX - 300 - 10}px;
       "
   >
-    {@html tooltipContent}
+    <CaseCard cardData={hoveredCaseData} expanded={true}></CaseCard>
   </div>
   
   <style>
@@ -28,7 +30,7 @@
       padding: 5px;
       z-index: 1000;
       box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
-      width: 300px;
+      max-width: 500px;
     }
   </style>