Display custom text for every icon

src/Icon.svelte

@@ -1,10 +1,23 @@
 <script>
 	export let icon;
 	export let info;
+
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	function handleMouseover() {
+		dispatch('mouseover', info);
+	}
+
+	function handleMouseout() {
+		dispatch('mouseout');
+	}
 </script>
 
 <div 
 	class="p-2 cursor-pointer text-center text-3xl"
+	on:mouseenter={handleMouseover}
+	on:mouseleave={handleMouseout}
 >
 	{icon}
 </div>

src/SideBar.svelte

@@ -4,6 +4,16 @@
 	const icons = [
 		{ icon: '\u{1F6C8}', info: 'Information' }
 	];
+
+	let activeInfo = null;
+
+	function showInfo(info) {
+		activeInfo = info;
+	}
+
+	function hideInfo() {
+		activeInfo = null;
+	}
 </script>
 
 <div class="flex flex-row w-14 bg-neutral-700">
@@ -12,9 +22,12 @@
 			<Icon
 				icon={icon}
 				info={info}
+				on:mouseover={(e) => showInfo(e.detail)}
+				on:mouseout={hideInfo}
 			/>
 		{/each}
 	</div>
 	<div class="shrink-0 w-52 h-full z-10 p-5 bg-neutral-600 text-gray-100">
+		{activeInfo}
 	</div>
 </div>