add ability of to create custom token closes #82

webpage/src/lib/Tooltip.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	let { title } = $props<{ title: string }>();
+
+	let isHovered = $state(false);
+	let x = $state(0);
+	let y = $state(0);
+
+    let div: HTMLDivElement;
+
+	function mouseOver(event: MouseEvent) {
+		isHovered = true;
+		x = event.pageX + 5;
+		y = event.pageY + 5;
+	}
+    function focus() {
+        isHovered = true;
+
+        const box = div.getBoundingClientRect();
+        x = box.x + 5;
+        y = box.y;
+    }
+	function mouseMove(event: MouseEvent) {
+		x = event.pageX + 5;
+		y = event.pageY + 5;
+	}
+	function mouseLeave() {
+		isHovered = false;
+	}
+</script>
+
+<div bind:this={div} on:mouseover={mouseOver} on:mouseleave={mouseLeave} on:mousemove={mouseMove} on:focus={focus} role="tooltip">
+	<slot />
+</div>
+
+{#if isHovered}
+	<div style="top: {y}px; left: {x}px;" class="tooltip">{title}</div>
+{/if}
+
+<style>
+	.tooltip {
+		border: 1px solid #ddd;
+		box-shadow: 1px 1px 1px #ddd;
+		background: white;
+		border-radius: 4px;
+		padding: 4px;
+		position: absolute;
+	}
+</style>