From 4be5d37a5441555c83eefbea17e86a5df4946749 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 22 Jul 2022 00:15:49 +0200
Subject: [PATCH] fix: improve tooltip

---
 frontend/src/lib/components/ArgInput.svelte       |  4 +---
 frontend/src/lib/components/FlowEditor.svelte     |  2 +-
 frontend/src/lib/components/Path.svelte           |  2 +-
 frontend/src/lib/components/RadioButtonV2.svelte  |  4 ++--
 frontend/src/lib/components/ResourceEditor.svelte |  2 +-
 frontend/src/lib/components/ScriptBuilder.svelte  |  2 +-
 frontend/src/lib/components/Tooltip.svelte        | 11 ++++++++++-
 frontend/src/routes/flows.svelte                  |  2 +-
 frontend/src/routes/flows/get/[...path].svelte    |  4 ++--
 frontend/src/routes/run/[...run].svelte           |  2 +-
 frontend/src/routes/schedule/add.svelte           |  2 +-
 frontend/src/routes/scripts/get/[...hash].svelte  | 12 ++++++------
 12 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 9a5fba184c..0fdc28e743 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -295,9 +295,7 @@
 						{disabled}
 						class="default-button-secondary items-center leading-4 py-0 my-px px-1 float-right"
 						on:click={() => (value = undefined)}
-						>Reset<Tooltip class="pl-1" position={'above'} direction={'left'}
-							>Reset to default value
-						</Tooltip></button
+						>Reset<Tooltip>Reset to default value</Tooltip></button
 					>
 				</div>
 			{/if}
diff --git a/frontend/src/lib/components/FlowEditor.svelte b/frontend/src/lib/components/FlowEditor.svelte
index 420260d642..b0f9ca2834 100644
--- a/frontend/src/lib/components/FlowEditor.svelte
+++ b/frontend/src/lib/components/FlowEditor.svelte
@@ -39,7 +39,7 @@
 							namePlaceholder="example/my/flow"
 							kind="flow"
 						>
-							<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+							<div slot="ownerToolkit">
 								Flow permissions depend on their path. Select the group <span class="font-mono"
 									>all</span
 								>
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index d46511ea9f..a1a59f9240 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -136,7 +136,7 @@
 	<div class="flex flex-col sm:grid sm:grid-cols-4 sm:gap-4 pb-0 mb-1">
 		<label class="block">
 			<span class="text-gray-700 text-sm">
-				Owner Kind<Tooltip class="mx-1">
+				Owner Kind <Tooltip>
 					<slot name="ownerToolkit" />
 				</Tooltip>
 			</span>
diff --git a/frontend/src/lib/components/RadioButtonV2.svelte b/frontend/src/lib/components/RadioButtonV2.svelte
index 40da608d54..5af7a3f839 100644
--- a/frontend/src/lib/components/RadioButtonV2.svelte
+++ b/frontend/src/lib/components/RadioButtonV2.svelte
@@ -10,14 +10,14 @@
 	const dispatch = createEventDispatcher()
 </script>
 
-<div class="flex flex-row space-x-4 m-4 reveal ">
+<div class="flex flex-row gap-x-4 m-4 reveal flex-wrap ">
 	{#each options as [label, val]}
 		<button
 			type="button"
 			on:click={() => {
 				value = val
 			}}
-			class="flex flex-col default-secondary-button-v2 mb-2 w-full"
+			class="flex flex-col default-secondary-button-v2 mb-2 grow"
 			class:selected={value == val}
 		>
 			<h2 class="mb-2 whitespace-nowrap">{label.title} <Tooltip>{label.desc}</Tooltip></h2>
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index 5ef5539cf8..7432ec3873 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -134,7 +134,7 @@ A good way to make resources user friendly is to link to a default script for yo
 						namePlaceholder="my/resource"
 						kind="resource"
 					>
-						<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+						<div slot="ownerToolkit">
 							Resource permissions depend on their path. Select the group <span class="font-mono"
 								>all</span
 							>
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 7fb72454fd..a25617a078 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -169,7 +169,7 @@
 				namePlaceholder="example/my/script"
 				kind="script"
 			>
-				<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+				<div slot="ownerToolkit">
 					Script permissions depend on their path. Select the group <span class="font-mono"
 						>all</span
 					>
diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
index 9ca10109c0..d9e30866aa 100644
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -16,7 +16,16 @@
 		}
 	})
 	const extraOpts = {
-		modifiers: [betterPreventOverflow({ padding: 50 })]
+		modifiers: [
+			betterPreventOverflow({ padding: 50 }),
+			{ name: 'offset', options: { offset: [8, 8] } },
+			{
+				name: 'arrow',
+				options: {
+					padding: 10 // 5px from the edges of the popper
+				}
+			}
+		]
 	}
 
 	let showTooltip = false
diff --git a/frontend/src/routes/flows.svelte b/frontend/src/routes/flows.svelte
index cd499acb42..41f4951581 100644
--- a/frontend/src/routes/flows.svelte
+++ b/frontend/src/routes/flows.svelte
@@ -153,7 +153,7 @@
 						<h3 class="mt-2 mb-2">
 							owner: {section}
 							{#if section == 'g/all'}
-								<Tooltip class="mx-1"
+								<Tooltip
 									>'g/all' is the namespace for the group all. Every user is a member of all.
 									Everything in this namespace is visible by all users. At the opposite, 'u/myuser'
 									are private user namespaces.</Tooltip
diff --git a/frontend/src/routes/flows/get/[...path].svelte b/frontend/src/routes/flows/get/[...path].svelte
index 8f60e1f2b9..326c1c7c72 100644
--- a/frontend/src/routes/flows/get/[...path].svelte
+++ b/frontend/src/routes/flows/get/[...path].svelte
@@ -157,7 +157,7 @@
 			</div>
 			<div>
 				<span>Webhook to run this flow:</span>
-				<Tooltip class="font-normal mx-1"
+				<Tooltip
 					>Send a POST http request with a token as bearer token and the args respecting the
 					corresponding jsonschema as payload. To create a permanent token, go to your user setting
 					by clicking your username on the top-left.</Tooltip
@@ -171,7 +171,7 @@
 			<div>
 				<div class="grid grid-cols-2 gap-4 pb-1 mb-3 border-b">
 					<h3 class="text-gray-700 ">
-						Arguments JSON schema <Tooltip class="font-normal mx-1"
+						Arguments JSON schema <Tooltip
 							>The jsonschema defines the constraints that the payload must respect to be compatible
 							with the input parameters of this flow. The UI form is generated automatically from
 							the flow jsonschema. See <a href="https://json-schema.org/"
diff --git a/frontend/src/routes/run/[...run].svelte b/frontend/src/routes/run/[...run].svelte
index 77adcaa543..e4682d108b 100644
--- a/frontend/src/routes/run/[...run].svelte
+++ b/frontend/src/routes/run/[...run].svelte
@@ -396,7 +396,7 @@
 					: 'text-gray-700 font-semibold  '}"
 				on:click={() => (viewTab = 'result')}
 			>
-				Result <Tooltip class="font-normal"
+				Result <Tooltip
 					>What is returned by the <span class="font-mono">main</span> function of the script. Dictionary
 					of columns are rendered as a table</Tooltip
 				>
diff --git a/frontend/src/routes/schedule/add.svelte b/frontend/src/routes/schedule/add.svelte
index 33d7cd0dbc..7960663cb0 100644
--- a/frontend/src/routes/schedule/add.svelte
+++ b/frontend/src/routes/schedule/add.svelte
@@ -151,7 +151,7 @@
 				namePlaceholder={'my/schedule'}
 				kind="schedule"
 			>
-				<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+				<div slot="ownerToolkit">
 					Schedule permissions depend on their path. Select the group <span class="font-mono"
 						>all</span
 					>
diff --git a/frontend/src/routes/scripts/get/[...hash].svelte b/frontend/src/routes/scripts/get/[...hash].svelte
index 030a6080bb..4f20c42e21 100644
--- a/frontend/src/routes/scripts/get/[...hash].svelte
+++ b/frontend/src/routes/scripts/get/[...hash].svelte
@@ -113,7 +113,7 @@
 			<a href="/scripts/get/{script?.hash}"
 				><span class="commit-hash">{truncateHash(script?.hash ?? '')}</span></a
 			>
-			<Tooltip class="font-normal">Each script version has an immutable hash.</Tooltip>
+			<Tooltip>Each script version has an immutable hash.</Tooltip>
 
 			{#if script?.is_template}
 				<span class="mx-2 bg-blue-500 rounded-md bg-opacity-25 text-sm font-normal px-1 py-px"
@@ -271,7 +271,7 @@
 			</div>
 			<div>
 				<h3>
-					Current hash <Tooltip class="font-normal mx-1"
+					Current hash <Tooltip
 						>The hash is an immutable and perpetual unique identifier for this version of this
 						script. The history of all hashes of a script constitute its lineage. This mechanism
 						shares some of the principles of git which identify each commit with an equivalent hash</Tooltip
@@ -281,7 +281,7 @@
 					<a href="/scripts/get/{script?.hash}">{script?.hash}</a>
 				</p>
 				<span>Webhook to run this script and get job's uuid as response:</span>
-				<Tooltip class="font-normal mx-1"
+				<Tooltip
 					>Send a POST http request with a token as bearer token and the args respecting the
 					corresponding jsonschema as payload. To create a permanent token, go to your user setting
 					by clicking your username on the top-left. For more info about openapi, see <a
@@ -299,7 +299,7 @@
 						></code
 					></pre>
 				<span>Endpoint to run this script and get job's result as response:</span>
-				<Tooltip class="font-normal mx-1"
+				<Tooltip
 					>Send a POST http request with a token as bearer token and the args respecting the
 					corresponding jsonschema as payload. To create a permanent token, go to your user setting
 					by clicking your username on the top-left. For more info about openapi, see <a
@@ -314,7 +314,7 @@
 			</div>
 			<div>
 				<h3 class="text-gray-700">
-					Previous versions of this hash<Tooltip class="font-normal mx-1"
+					Previous versions of this hash<Tooltip
 						>When you edit a script, a new hash is created and old versions are archived</Tooltip
 					>
 				</h3>
@@ -327,7 +327,7 @@
 			<div>
 				<div class="grid grid-cols-2 gap-4 pb-1 mb-3 border-b">
 					<h3 class="text-gray-700 ">
-						Arguments JSON schema <Tooltip class="font-normal mx-1"
+						Arguments JSON schema <Tooltip
 							>The jsonschema defines the constraints that the payload must respect to be compatible
 							with the input parameters of this script. The UI form is generated automatically from
 							the script jsonschema. See <a href="https://json-schema.org/"