Add tooltips

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -32,7 +32,7 @@
   import { capitalise } from "@/helpers"
   import { Utils, JsonFormatter } from "@budibase/frontend-core"
   import { licensing } from "@/stores/portal"
-  import { BindingMode, SidePanel } from "@budibase/types"
+  import { BindingMode } from "@budibase/types"
   import type {
     EnrichedBinding,
     Snippet,
@@ -71,6 +71,17 @@
   let expressionError: string | undefined
   let evaluating = false
 
+  const enum SidePanel {
+    Bindings = "Bindings",
+    Evaluation = "Evaluation",
+    Snippets = "Snippets",
+  }
+  const SidePanelIcons: Record<SidePanel, string> = {
+    Bindings: "FlashOn",
+    Evaluation: "Play",
+    Snippets: "Code",
+  }
+
   $: useSnippets = allowSnippets && !$licensing.isFreePlan
   $: editorModeOptions = getModeOptions(allowHBS, allowJS)
   $: sidePanelOptions = getSidePanelOptions(
@@ -342,14 +353,15 @@
             {/each}
           </div>
           <div class="side-tabs">
-            {#each sidePanelOptions as panel}
+            {#each sidePanelOptions as panelOption}
               <ActionButton
                 size="M"
                 quiet
-                selected={sidePanel === panel}
+                selected={sidePanel === panelOption}
-                on:click={() => changeSidePanel(panel)}
+                on:click={() => changeSidePanel(panelOption)}
+                tooltip={panelOption}
               >
-                <Icon name={panel} size="S" />
+                <Icon name={SidePanelIcons[panelOption]} size="S" />
               </ActionButton>
             {/each}
           </div>

packages/types/src/ui/components/index.ts

@@ -1,4 +1,3 @@
-export * from "./sidepanel"
 export * from "./codeEditor"
 export * from "./errors"
 

packages/types/src/ui/components/sidepanel.ts

@@ -1,5 +0,0 @@
-export enum SidePanel {
-  Bindings = "FlashOn",
-  Evaluation = "Play",
-  Snippets = "Code",
-}