fix: improve tooltip

frontend/package-lock.json

@@ -45,6 +45,7 @@
 				"svelte-highlight": "^6.2.0",
 				"svelte-markdown": "^0.2.1",
 				"svelte-overlay": "^1.4.1",
+				"svelte-popperjs": "^1.2.11",
 				"svelte-preprocess": "^4.9.8",
 				"svelte-split-pane": "^0.1.2",
 				"svelte2tsx": "^0.5.11",
@@ -309,6 +310,17 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/@popperjs/core": {
+			"version": "2.11.5",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+			"integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+			"dev": true,
+			"peer": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/popperjs"
+			}
+		},
 		"node_modules/@rollup/pluginutils": {
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -4203,6 +4215,15 @@
 			"integrity": "sha512-HNtAvOeywwGNvIdeK4QpBa2IYhUNDSwMmwqpvb2XqAhscUT+R4RMEmRn9pEW5p/wmlcmJiiS8MGJ7ogUGFRS8w==",
 			"dev": true
 		},
+		"node_modules/svelte-popperjs": {
+			"version": "1.2.11",
+			"resolved": "https://registry.npmjs.org/svelte-popperjs/-/svelte-popperjs-1.2.11.tgz",
+			"integrity": "sha512-m71aNmzssXB4Sm2qrwlPGNcrAp/eIG9sv+X04Lb4uspVH7kmYhUeq58m3wx8RVqu1Vl+/3Alosu9xgay4N8n1g==",
+			"dev": true,
+			"peerDependencies": {
+				"@popperjs/core": "2.x"
+			}
+		},
 		"node_modules/svelte-preprocess": {
 			"version": "4.10.7",
 			"dev": true,
@@ -4943,6 +4964,13 @@
 				"playwright-core": "1.23.4"
 			}
 		},
+		"@popperjs/core": {
+			"version": "2.11.5",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+			"integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+			"dev": true,
+			"peer": true
+		},
 		"@rollup/pluginutils": {
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -7323,6 +7351,13 @@
 			"integrity": "sha512-HNtAvOeywwGNvIdeK4QpBa2IYhUNDSwMmwqpvb2XqAhscUT+R4RMEmRn9pEW5p/wmlcmJiiS8MGJ7ogUGFRS8w==",
 			"dev": true
 		},
+		"svelte-popperjs": {
+			"version": "1.2.11",
+			"resolved": "https://registry.npmjs.org/svelte-popperjs/-/svelte-popperjs-1.2.11.tgz",
+			"integrity": "sha512-m71aNmzssXB4Sm2qrwlPGNcrAp/eIG9sv+X04Lb4uspVH7kmYhUeq58m3wx8RVqu1Vl+/3Alosu9xgay4N8n1g==",
+			"dev": true,
+			"requires": {}
+		},
 		"svelte-preprocess": {
 			"version": "4.10.7",
 			"dev": true,

frontend/package.json

@@ -42,6 +42,7 @@
 		"svelte-highlight": "^6.2.0",
 		"svelte-markdown": "^0.2.1",
 		"svelte-overlay": "^1.4.1",
+		"svelte-popperjs": "^1.2.11",
 		"svelte-preprocess": "^4.9.8",
 		"svelte-split-pane": "^0.1.2",
 		"svelte2tsx": "^0.5.11",

frontend/src/lib/components/RadioButtonV2.svelte

@@ -3,13 +3,14 @@
 	export let value: any
 
 	import { createEventDispatcher } from 'svelte'
+	import Tooltip from './Tooltip.svelte'
 
 	$: dispatch('change', value)
 
 	const dispatch = createEventDispatcher()
 </script>
 
-<div class="flex flex-row space-x-4 m-4 reveal">
+<div class="flex flex-row space-x-4 m-4 reveal ">
 	{#each options as [label, val]}
 		<button
 			type="button"
@@ -19,18 +20,12 @@
 			class="flex flex-col default-secondary-button-v2 mb-2 w-full"
 			class:selected={value == val}
 		>
-			<h2 class="mb-2">{label.title}</h2>
-			<p class="hidden">
-				{label.desc}
-			</p>
+			<h2 class="mb-2 whitespace-nowrap">{label.title} <Tooltip>{label.desc}</Tooltip></h2>
 		</button>
 	{/each}
 </div>
 
 <style>
-	.reveal:hover > button > p {
-		display: block;
-	}
 	.selected {
 		@apply bg-blue-500/70 text-white;
 	}

frontend/src/lib/components/Tooltip.svelte

@@ -1,76 +1,54 @@
 <script lang="ts">
 	import Icon from 'svelte-awesome'
 	import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+	import { createPopperActions } from 'svelte-popperjs'
 	import { fade } from 'svelte/transition'
+	const [popperRef, popperContent] = createPopperActions({
+		placement: 'auto'
+	})
+	const betterPreventOverflow = (options) => ({
+		name: 'preventOverflow',
+		options,
+		effect: ({ state }) => {
+			const { padding = 0 } = options
 
-	export let position: ActionKind = 'above'
-	export let direction: DirectionKind = 'default'
-	type ActionKind = 'above' | 'below'
-	type DirectionKind = 'default' | 'left'
+			state.elements.popper.style.maxWidth = `calc(100vw - ${padding * 2}px)`
+		}
+	})
+	const extraOpts = {
+		modifiers: [betterPreventOverflow({ padding: 50 })]
+	}
 
-	let viewTooltip = false
-	let mouseOnMessage = false
-	let mouseOver = false
+	let showTooltip = false
+	let timeout: NodeJS.Timeout
 
-	// This function makes sure the tooltip does not disappear when moving the mouse to the tooltip
-	// message, so that users can click links there for example
-	function hideTooltip(): void {
-		setTimeout(function () {
-			if (!mouseOnMessage && !mouseOver) {
-				viewTooltip = false
-			} else {
-				hideTooltip()
-			}
-		}, 300)
+	function open() {
+		clearTimeout(timeout)
+		showTooltip = true
+	}
+	function close() {
+		timeout = setTimeout(() => (showTooltip = false), 200)
 	}
 </script>
 
-<div class="inline-block has-tooltip {$$props.class}">
-	{#if viewTooltip}
-		<span
-			transition:fade
-			class="tooltip rounded shadow-lg p-1 leading-4 {position === 'above' ? '-mt-8' : 'mt-6'} 
-			{viewTooltip ? 'tooltip-visible' : 'tooltip'} {direction === 'left' ? 'right-0' : ''}
-			text-2xs text-gray-700"
-			on:mouseover={() => {
-				mouseOnMessage = true
-			}}
-			on:focus={() => {}}
-			on:mouseout={() => {
-				mouseOnMessage = false
-			}}
-			on:blur={() => {}}
-			><slot />
-		</span>
-	{/if}
-	<Icon class="text-gray-500 font-thin inline-block align-middle" data={faInfoCircle} scale={0.6} />
-	<!-- Hovering on this (invisible) area triggers the apparition of the tooltip. Needed because the icon is too small-->
+<button use:popperRef on:mouseenter={open} on:mouseleave={close}>
+	<Icon class="text-gray-500 font-thin inline-block align-middle" data={faInfoCircle} scale={0.8} />
+</button>
+{#if showTooltip}
 	<div
-		class="relative w-4 h-5 -mt-5 -ml-1"
-		on:mouseover={() => {
-			viewTooltip = true
-			mouseOver = true
-		}}
-		on:focus={() => {
-			viewTooltip = true
-		}}
-		on:mouseout={() => {
-			hideTooltip()
-			mouseOver = false
-		}}
-		on:blur={() => {}}
-	/>
-</div>
+		transition:fade
+		id="tooltip"
+		use:popperContent={extraOpts}
+		on:mouseenter={open}
+		on:mouseleave={close}
+	>
+		<slot />
+		<div id="arrow" data-popper-arrow />
+	</div>
+{/if}
 
 <style>
-	.tooltip {
-		@apply invisible absolute;
-		@apply duration-100 transition-opacity;
-	}
-
-	.tooltip-visible {
-		@apply absolute visible z-50 bg-white;
-		@apply max-w-sm;
-		@apply transition-opacity;
+	#tooltip {
+		@apply z-50 font-normal text-gray-300 bg-zinc-800 p-4 rounded-xl whitespace-normal;
 	}
 </style>

frontend/tailwind.config.cjs

@@ -16,6 +16,9 @@ const config = {
 			},
 			minHeight: {
 				'1/2': '50vh'
+			},
+			transitionProperty: {
+				'height': 'height'
 			}
 		}
 	},