From f8d233f178d116fa4eee80648804ff51c995c6b7 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 20 May 2023 12:01:08 +0200
Subject: [PATCH] tooltip fixes

---
 frontend/src/lib/components/Popover.svelte    | 21 +++++++++++--------
 .../editor/componentsPanel/CssProperty.svelte |  7 ++++++-
 .../clearableInput/ClearableInput.svelte      |  2 ++
 .../components/flows/CreateActionsApp.svelte  |  6 +++---
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/Popover.svelte b/frontend/src/lib/components/Popover.svelte
index f2995fcf68..5b6bf5be93 100644
--- a/frontend/src/lib/components/Popover.svelte
+++ b/frontend/src/lib/components/Popover.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
 	import type { PopoverPlacement } from './Popover.model'
+	import Portal from 'svelte-portal'
 
 	export let placement: PopoverPlacement = 'auto'
 	export let notClickable = false
@@ -46,15 +47,17 @@
 	</button>
 {/if}
 {#if showTooltip && !disablePopup}
-	<div
-		use:popperContent={popperOptions}
-		on:mouseenter={open}
-		on:mouseleave={close}
-		class="z-50 py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800
+	<Portal>
+		<div
+			use:popperContent={popperOptions}
+			on:mouseenter={open}
+			on:mouseleave={close}
+			class="z-[2000] py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800
 		whitespace-normal text-left {popupClass}"
-	>
-		<div class="max-w-sm">
-			<slot name="text" />
+		>
+			<div class="max-w-sm">
+				<slot name="text" />
+			</div>
 		</div>
-	</div>
+	</Portal>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
index e440bcc2ab..47f9eeadf4 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
@@ -9,6 +9,7 @@
 	import type { TypedComponent } from '../component'
 	import QuickStyleMenu from './QuickStyleMenu.svelte'
 	import type { PropertyGroup } from './quickStyleProperties'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 
 	export let name: string
 	export let value: ComponentCssProperty = {}
@@ -90,7 +91,11 @@
 		{#if value.class !== undefined || forceClass}
 			<!-- svelte-ignore a11y-label-has-associated-control -->
 			<label class="block">
-				<div class="text-sm font-medium text-gray-600 pb-0.5"> Tailwind classes </div>
+				<div class="text-sm font-medium text-gray-600 pb-0.5">
+					Tailwind classes<Tooltip documentationLink="https://tailwindcss.com/"
+						>Use any tailwind classes to style your component</Tooltip
+					></div
+				>
 				<div class="relative">
 					<ClearableInput bind:value={value.class} />
 				</div>
diff --git a/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte b/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
index 133ea87055..cce125f3c8 100644
--- a/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
+++ b/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
@@ -22,6 +22,8 @@
 	function clear() {
 		value = ''
 	}
+
+	$: if (value === undefined) value = ''
 </script>
 
 <div
diff --git a/frontend/src/lib/components/flows/CreateActionsApp.svelte b/frontend/src/lib/components/flows/CreateActionsApp.svelte
index 008438b68c..ef215bc51b 100644
--- a/frontend/src/lib/components/flows/CreateActionsApp.svelte
+++ b/frontend/src/lib/components/flows/CreateActionsApp.svelte
@@ -93,10 +93,10 @@
 		<h2 class="border-b pb-1 mt-10 mb-4"
 			>IIFE JS code <Tooltip
 				documentationLink="https://docs.windmill.dev/docs/react_vue_svelte_apps/react"
-				>Bundle that contains an IIFE code that will mount itself to the root element. Any framework
-				of vanilla JS can be used to create an app and templates are provided for the major
+				>Bundle that contains an IIFE code that will mount itself to a "root" element. Any framework
+				or vanilla JS can be used to create an app and templates are provided for the major
 				frameworks: React/Vue/Svelte. In those frontend apps, it is possible to inline scripts
-				directly to be executed by windmill backend which make it a convenient way of building apps
+				directly to be executed by windmill backend which makes it a convenient way of building apps
 				with both frontend and backend all-in-one.</Tooltip
 			></h2
 		>