Update multiple usages of tooltips to use new tooltip

packages/bbui/src/Button/Button.svelte

@@ -1,6 +1,7 @@
 <script>
   import "@spectrum-css/button/dist/index-vars.css"
-  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let type
   export let disabled = false
@@ -16,9 +17,12 @@
   export let tooltip = undefined
   export let newStyles = true
   export let id
+
+  const dispatch = createEventDispatcher()
 </script>
 
-<button
+<AbsTooltip text={tooltip}>
+  <button
     {id}
     {type}
     class:spectrum-Button--cta={cta}
@@ -29,11 +33,14 @@
     class:spectrum-Button--quiet={quiet}
     class:new-styles={newStyles}
     class:active
-  class:disabled
+    class:is-disabled={disabled}
     class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
-  {disabled}
+    on:click|preventDefault={() => {
-  on:click|preventDefault
+      if (!disabled) {
->
+        dispatch("click")
+      }
+    }}
+  >
     {#if icon}
       <svg
         class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
@@ -47,17 +54,16 @@
     {#if $$slots}
       <span class="spectrum-Button-label"><slot /></span>
     {/if}
-  {#if tooltip}
+  </button>
-    <div class="tooltip">
+</AbsTooltip>
-      <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
-    </div>
-  {/if}
-</button>
 
 <style>
   button {
     position: relative;
   }
+  button.is-disabled {
+    cursor: default;
+  }
   .spectrum-Button-label {
     white-space: nowrap;
     overflow: hidden;
@@ -66,23 +72,6 @@
   .active {
     color: var(--spectrum-global-color-blue-600) !important;
   }
-  .tooltip {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    z-index: 100;
-    width: 160px;
-    text-align: center;
-    transform: translateX(-50%);
-    left: 50%;
-    top: 100%;
-    opacity: 0;
-    transition: opacity 130ms ease-out;
-    pointer-events: none;
-  }
-  button:hover .tooltip {
-    opacity: 1;
-  }
   .spectrum-Button--primary.new-styles {
     background: var(--spectrum-global-color-gray-800);
     border-color: transparent;
@@ -96,10 +85,10 @@
     border-color: transparent;
     color: var(--spectrum-global-color-gray-900);
   }
-  .spectrum-Button--secondary.new-styles:not(.disabled):hover {
+  .spectrum-Button--secondary.new-styles:not(.is-disabled):hover {
     background: var(--spectrum-global-color-gray-300);
   }
-  .spectrum-Button--secondary.new-styles.disabled {
+  .spectrum-Button--secondary.new-styles.is-disabled {
     color: var(--spectrum-global-color-gray-500);
   }
 </style>

packages/bbui/src/Popover/Popover.svelte

@@ -90,6 +90,6 @@
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000);
     border-color: var(--spectrum-global-color-gray-300);
-    overflow: visible;
+    overflow: auto;
   }
 </style>

packages/bbui/src/Tooltip/AbsTooltip.svelte

@@ -1,5 +1,5 @@
 <script context="module">
-  export const TooltipDirection = {
+  export const TooltipPosition = {
     Top: "top",
     Right: "right",
     Bottom: "bottom",
@@ -19,8 +19,8 @@
   import { fade } from "svelte/transition"
   import "@spectrum-css/tooltip/dist/index-vars.css"
 
-  export let direction = TooltipDirection.Top
+  export let position = TooltipPosition.Top
-  export let type = TooltipType.Positive
+  export let type = TooltipType.Default
   export let text = ""
 
   let wrapper
@@ -35,16 +35,16 @@
     }
     const bounds = node.getBoundingClientRect()
 
-    if (direction === TooltipDirection.Top) {
+    if (position === TooltipPosition.Top) {
       left = bounds.left + bounds.width / 2
       top = bounds.top
-    } else if (direction === TooltipDirection.Right) {
+    } else if (position === TooltipPosition.Right) {
       left = bounds.left + bounds.width
       top = bounds.top + bounds.height / 2
-    } else if (direction === TooltipDirection.Bottom) {
+    } else if (position === TooltipPosition.Bottom) {
       left = bounds.left + bounds.width / 2
       top = bounds.top + bounds.height
-    } else if (direction === TooltipDirection.Left) {
+    } else if (position === TooltipPosition.Left) {
       left = bounds.left
       top = bounds.top + bounds.height / 2
     } else {
@@ -58,18 +58,19 @@
   }
 </script>
 
-<div
+{#if text}
+  <div
     bind:this={wrapper}
     class="abs-tooltip"
     on:mouseover={show}
     on:mouseleave={hide}
->
+  >
     <slot />
-</div>
+  </div>
-{#if visible}
+  {#if visible}
     <Portal target=".spectrum">
       <span
-      class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{direction} is-open"
+        class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
         style="left:{left}px;top:{top}px;"
         transition:fade|local={{ duration: 130 }}
       >
@@ -77,6 +78,9 @@
         <span class="spectrum-Tooltip-tip" />
       </span>
     </Portal>
+  {/if}
+{:else}
+  <slot />
 {/if}
 
 <style>
@@ -85,7 +89,7 @@
   }
   .spectrum-Tooltip {
     position: absolute;
-    z-index: 999;
+    z-index: 9999;
     pointer-events: none;
     margin: 0;
     max-width: 280px;

packages/bbui/src/index.js

@@ -38,7 +38,7 @@ export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
 export {
   default as AbsTooltip,
-  TooltipDirection,
+  TooltipPosition,
   TooltipType,
 } from "./Tooltip/AbsTooltip.svelte"
 export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"

packages/builder/src/components/deploy/AppActions.svelte

@@ -10,6 +10,7 @@
     Link,
     Modal,
     StatusLight,
+    AbsTooltip,
   } from "@budibase/bbui"
   import RevertModal from "components/deploy/RevertModal.svelte"
   import VersionModal from "components/deploy/VersionModal.svelte"
@@ -250,15 +251,20 @@
                     <Link quiet on:click={unpublishApp}>Unpublish</Link>
                   </span>
                   <span class="revert-link">
+                    <AbsTooltip
+                      text={$isOnlyUser
+                        ? null
+                        : "Unavailable - another user is editing this app"}
+                    >
                       <Link
                         disabled={!$isOnlyUser}
                         quiet
                         secondary
                         on:click={revertApp}
-                      tooltip="Unavailable - another user is editing this app"
                       >
                         Revert
                       </Link>
+                    </AbsTooltip>
                   </span>
                 {:else}
                   <span class="status-text unpublished">Not published</span>

packages/builder/src/components/portal/page/SideNavItem.svelte

@@ -1,11 +1,8 @@
 <script>
-  import { Tooltip } from "@budibase/bbui"
-
   export let text
   export let url
   export let active = false
   export let disabled = false
-  export let tooltip = null
 </script>
 
 <div class="side-nav-item">
@@ -18,11 +15,6 @@
       {text || ""}
     </div>
   {/if}
-  {#if tooltip}
-    <div class="tooltip">
-      <Tooltip textWrapping direction="right" text={tooltip} />
-    </div>
-  {/if}
 </div>
 
 <style>
@@ -45,17 +37,4 @@
     pointer-events: none;
     color: var(--spectrum-global-color-gray-500) !important;
   }
-  .tooltip {
-    position: absolute;
-    transform: translateY(-50%);
-    left: 100%;
-    top: 50%;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 130ms ease-out;
-    z-index: 100;
-  }
-  .side-nav-item:hover .tooltip {
-    opacity: 1;
-  }
 </style>

packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Content, SideNav, SideNavItem } from "components/portal/page"
-  import { Page, Layout } from "@budibase/bbui"
+  import { Page, Layout, AbsTooltip, TooltipPosition } from "@budibase/bbui"
   import { url, isActive } from "@roxi/routify"
   import DeleteModal from "components/deploy/DeleteModal.svelte"
   import { isOnlyUser } from "builderStore"
@@ -45,16 +45,20 @@
             active={$isActive("./version")}
           />
           <div class="delete-action">
+            <AbsTooltip
+              position={TooltipPosition.Right}
+              text={$isOnlyUser
+                ? null
+                : "Unavailable - another user is editing this app"}
+            >
               <SideNavItem
                 text="Delete app"
+                disabled={!$isOnlyUser}
                 on:click={() => {
                   deleteModal.show()
                 }}
-              disabled={!$isOnlyUser}
-              tooltip={$isOnlyUser
-                ? null
-                : "Unavailable - another user is editing this app"}
               />
+            </AbsTooltip>
           </div>
         </SideNav>
         <slot />

packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte

@@ -6,6 +6,8 @@
     Heading,
     Body,
     Modal,
+    AbsTooltip,
+    TooltipPosition,
   } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import CreateRestoreModal from "./CreateRestoreModal.svelte"
@@ -46,16 +48,18 @@
     </div>
 
     {#if row.type !== "restore"}
+      <AbsTooltip
+        position={TooltipPosition.Left}
+        text="Unavailable - another user is editing this app"
+      >
         <MenuItem
           on:click={restoreDialog.show}
           icon="Revert"
           disabled={!$isOnlyUser}
-        tooltip={$isOnlyUser
-          ? null
-          : "Unavailable - another user is editing this app"}
         >
           Restore
         </MenuItem>
+      </AbsTooltip>
       <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
       <MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
     {/if}

packages/frontend-core/src/components/grid/layout/HeaderRow.svelte

@@ -6,7 +6,7 @@
     Icon,
     AbsTooltip,
     TooltipType,
-    TooltipDirection,
+    TooltipPosition,
   } from "@budibase/bbui"
 
   const {
@@ -37,7 +37,7 @@
   {#if $config.allowSchemaChanges}
     <AbsTooltip
       text="Click here to create your first column"
-      direction={TooltipDirection.Bottom}
+      position={TooltipPosition.Bottom}
       type={TooltipType.Info}
     >
       <div