tooltip button complete - #29

Arctos6135 · Mar 14, 2024 · 23c13c3 · 23c13c3
1 parent 9463c58
commit 23c13c3
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 4 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,8 @@
 {
     "cSpell.words": [
         "Arctos",
-        "Calvera"
+        "Calvera",
+        "failuires",
+        "Interactable"
     ]
 }
diff --git a/src/lib/components/FormFlow/Input.svelte b/src/lib/components/FormFlow/Input.svelte
@@ -4,6 +4,7 @@
 	import Counter from "./Counter.svelte";
 	import Dropdown from "./Dropdown.svelte";
 	import Textbox from "./Textbox.svelte";
+	import Tooltip from "./Tooltip.svelte";
 
     export let input: Input;
 
@@ -27,6 +28,11 @@
     >
     <span
         class="text-xl min-w-max"
-    >{input.label}</span>
+        >
+        {input.label}
+        {#if input.tooltip}
+            <Tooltip content={input.tooltip} />
+        {/if}
+    </span>
     <Component {component} bind:error/>
 </div>
diff --git a/src/lib/components/FormFlow/Tooltip.svelte b/src/lib/components/FormFlow/Tooltip.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { onDestroy, onMount } from "svelte";
+
+	export let content: string;
+	
+	let tooltipVisible = false;
+	let tooltipElement: HTMLSpanElement;
+	let tooltipButton: HTMLButtonElement;
+
+
+	// Handle clicks outside the tooltip
+	const onClick = (event: MouseEvent) => {
+		if (tooltipElement && tooltipButton && !(tooltipElement.contains(event.target as Node) || tooltipButton.contains(event.target as Node))) {
+			tooltipVisible = false;
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener("click", onClick);
+	});
+
+	onDestroy(() => {
+		document.removeEventListener("click", onClick);	
+	});
+</script>
+
+<span class="relative">
+	<!-- Tooltip button -->
+	<button bind:this={tooltipButton} class="clickable bg-primary rounded-full italic text-sm w-6 h-6 text-center" on:click={() => tooltipVisible = !tooltipVisible}>i</button>
+
+	<!-- Tooltip -->
+	<span 
+	bind:this={tooltipElement} 
+	class="absolute z-10 text-base bg-primary p-3 rounded-lg drop-shadow-btn-hover left-full right-[max(-50vw,-300px)] max-w-max transition-all opacity-0 translate-y-5 invisible"
+	class:!visible={tooltipVisible}
+	class:opacity-100={tooltipVisible}
+	class:!translate-y-0={tooltipVisible}
+	>
+		{content}
+	</span>
+</span>
diff --git a/src/lib/formLayout.ts b/src/lib/formLayout.ts
@@ -10,18 +10,19 @@ export const BSForm: Form = {
                 {
                     type: "input",
                     label: "Score amp",
+                    tooltip: "The number of notes scored in the amp",
                     component: {
                         type: "Counter",
                         id: "auto score amp",
                         hasButtons: true,
                         initialValue: 0,
                         min: 0
                     }
-
                 },
                 {
                     type: "input",
                     label: "Score speaker",
+                    tooltip: "The number of notes scored in the speaker",
                     component: {
                         type: "Counter",
                         id: "auto score speaker",
@@ -41,6 +42,7 @@ export const BSForm: Form = {
                 {
                     type: "input",
                     label: "Score amp",
+                    tooltip: "The number of notes scored in the amp",
                     component: {
                         type: "Counter",
                         id: "teleop score amp",
@@ -53,6 +55,7 @@ export const BSForm: Form = {
                 {
                     type: "input",
                     label: "Score speaker",
+                    tooltip: "The number of notes scored in the speaker",
                     component: {
                         type: "Counter",
                         id: "teleop score speaker",
@@ -65,6 +68,7 @@ export const BSForm: Form = {
                 {
                     type: "input",
                     label: "Ground intake",
+                    tooltip: "The number of notes intaked off the ground",
                     component: {
                         type: "Checkbox",
                         id: "ground intake",
@@ -73,6 +77,7 @@ export const BSForm: Form = {
                 },
                 {
                     type: "input",
+                    tooltip: "The number of notes intaked from the source locations",
                     label: "Source (not ground) intake",
                     component: {
                         type: "Checkbox",
@@ -95,6 +100,7 @@ export const SSForm: Form = {
                 {
                     type: "input",
                     label: "Used Auto stop?",
+                    tooltip: "Auto stop refers to the A-STOP (i.e. the emergency stop for the autonomous period)",
                     component: {
                         type: "Checkbox",
                         id: "auto stop",
@@ -111,6 +117,7 @@ export const SSForm: Form = {
                 {
                     type: "input",
                     label: "Did defend?",
+                    tooltip: "Did the robot defend another robot?",
                     component: {
                         type: "Checkbox",
                         id: "defended",
@@ -120,6 +127,7 @@ export const SSForm: Form = {
                 {
                     type: "input",
                     label: "Was defended?",
+                    tooltip: "Was the robot defended by another robot?",
                     component: {
                         type: "Checkbox",
                         id: "was defended",
@@ -129,6 +137,7 @@ export const SSForm: Form = {
                 {
                     type: "input",
                     label: "Level of failure",
+                    tooltip: "Minor: small components breaking, nothing game-changing.\nMajor: important components broken, robot tipped, etc. Disrupts the team's ability to play the match effectively or participate at all.\nCatastrophic: failuires that render the team unable to compete for the entire season.",
                     component: {
                         type: "Dropdown",
                         id: "level of failure",
@@ -225,6 +234,7 @@ export const SSForm: Form = {
                 {
                     type: "input",
                     label: "Climb time",
+                    tooltip: "The number of seconds the robot took to climb.",
                     component: {
                         type: "Counter",
                         id: "climb time",
@@ -337,7 +347,8 @@ export const PSForm: Form = {
                 },
                 {
                     type: "input",
-                    label: "Robots favourite colour",
+                    label: "Robot's favourite colour",
+                    tooltip: "Most important question.",
                     component: {
                         type: "Textbox",
                         id: "fave colour",

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -22,6 +22,7 @@ export type Section = {
 export type Input = {
     type: "input";
     label: string;
+    tooltip?: string;
     component: Component;
 };