wip

packages/bbui/src/Form/Core/Multiselect.svelte

@@ -22,6 +22,8 @@
   export let open = false
   export let loading
   export let align
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
 
@@ -107,4 +109,6 @@
   {customPopoverHeight}
   {loading}
   {align}
+  {onOptionMouseenter}
+  {onOptionMouseleave}
 />

packages/bbui/src/Form/Core/Picker.svelte

@@ -19,8 +19,6 @@
   import ContextTooltip from "../../Tooltip/Context.svelte"
   import { Heading } from "@budibase/bbui"
 
-
-
   export let id = null
   export let disabled = false
   export let fieldText = ""
@@ -52,18 +50,14 @@
   export let footer = null
   export let customAnchor = null
   export let loading
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
 
   let button
   let component
 
-  let contextTooltipId = 0;
-  let contextTooltipAnchor = null
-  let contextTooltipOption = null
-  let previousContextTooltipOption = null
-  let contextTooltipVisible = false
-
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
     sortedOptions,
@@ -119,28 +113,6 @@
   onDestroy(() => {
     component?.removeEventListener("scroll", null)
   })
-
-  const handleMouseenter = (e, option, idx) => {
-    contextTooltipId += 1;
-    const invokedContextTooltipId = contextTooltipId
-
-    setTimeout(() => {
-      if (contextTooltipId === invokedContextTooltipId) {
-        contextTooltipAnchor = e.target;
-        previousContextTooltipOption = contextTooltipOption;
-        contextTooltipOption = option;
-        contextTooltipVisible = true;
-      }
-    }, 200)
-  }
-
-  const handleMouseleave = (e, option) => {
-    setTimeout(() => {
-      if (option === contextTooltipOption) {
-        contextTooltipVisible = false;
-      }
-    }, 600)
-  }
 </script>
 
 <button
@@ -231,8 +203,8 @@
         {#if filteredOptions.length}
           {#each filteredOptions as option, idx}
               <li
-                on:mouseenter={(e) => handleMouseenter(e, option, idx)}
-                on:mouseleave={(e) => handleMouseleave(e, option, idx)}
+                on:mouseenter={(e) => onOptionMouseenter(e, option)}
+                on:mouseleave={(e) => onOptionMouseleave(e, option)}
                 class="spectrum-Menu-item"
                 class:is-selected={isOptionSelected(getOptionValue(option, idx))}
                 role="option"
@@ -300,64 +272,7 @@
       {/if}
     </div>
   </Popover>
-  <ContextTooltip
-    visible={contextTooltipVisible}
-    anchor={contextTooltipAnchor}
-    offset={20}
-  >
-    <div
-      class="tooltipContents"
-    >
-      {#if contextTooltipOption}
-        <div class="contextTooltipHeader">
-          <Icon name={getOptionIcon(contextTooltipOption)} />
-          <Heading>{contextTooltipOption}</Heading>
-        </div>
-        <p>{getOptionTooltip(contextTooltipOption)}</p>
-      {/if}
-    </div>
-    <div slot="previous"
-      class="tooltipContents"
-    >
-      {#if previousContextTooltipOption}
-        <div class="contextTooltipHeader">
-          <Icon name={getOptionIcon(previousContextTooltipOption)} />
-          <Heading>{previousContextTooltipOption}</Heading>
-        </div>
-        <p>{getOptionTooltip(previousContextTooltipOption)}</p>
-      {/if}
-    </div>
-  </ContextTooltip>
-
 <style>
-  .tooltipContents {
-    max-width: 200px;
-    background-color: var(--spectrum-global-color-gray-200);
-    display: inline-block;
-    padding: 12px;
-    border-radius: 5px;
-    box-sizing: border-box;
-  }
-
-  .contextTooltipHeader {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .contextTooltipHeader :global(svg) {
-    color: var(--background);
-    margin-right: 5px;
-  }
-
-  .contextTooltipHeader :global(h1) {
-    flex-grow: 1;
-    font-size: 15px;
-    text-wrap: wrap;
-    word-break: break-all;
-  }
-
-
   .spectrum-Menu {
     display: block;
   }

packages/bbui/src/Form/Multiselect.svelte

@@ -24,6 +24,8 @@
   export let customPopoverHeight
   export let helpText = null
   export let align
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -51,6 +53,8 @@
     {autocomplete}
     {customPopoverHeight}
     {align}
+    {onOptionMouseenter}
+    {onOptionMouseleave}
     bind:searchTerm
     on:change={onChange}
     on:click

packages/bbui/src/Tooltip/Context.svelte

@@ -1,11 +1,14 @@
 <script>
   import Portal from "svelte-portal"
-  import { fade } from 'svelte/transition';
+  import { getContext } from "svelte"
+  import Context from "../context"
 
   export let anchor
   export let visible = false
   export let offset = 0;
 
+  $: target = getContext(Context.PopoverRoot) || ".spectrum"
+
   let hovering = false
   let wrapper
   let resetWrapper
@@ -95,7 +98,7 @@
   }
 </script>
 
-<Portal target=".spectrum">
+<Portal {target}>
   <div
     bind:this={wrapper}
     on:mouseenter={handleMouseenter}

packages/bbui/src/index.js

@@ -43,6 +43,7 @@ export {
   TooltipType,
 } from "./Tooltip/AbsTooltip.svelte"
 export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
+export { default as ContextTooltip } from "./Tooltip/Context.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"

packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Multiselect } from "@budibase/bbui"
+  import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
@@ -10,6 +10,12 @@
   export let placeholder
   export let fieldValidator
 
+  let contextTooltipId = 0;
+  let contextTooltipAnchor = null
+  let contextTooltipOption = null
+  let previousContextTooltipOption = null
+  let contextTooltipVisible = false
+
   const TypeIconMap = {
     text: "Text",
     options: "Dropdown",
@@ -105,9 +111,7 @@
     const support = fieldSupport[optionKey]?.support;
     const message = fieldSupport[optionKey]?.message;
 
-    if (support === unsupported) return message
-
-    return null
+    return message
   }
 
   const isOptionEnabled = optionKey => {
@@ -120,17 +124,103 @@
 
     return true
   }
+
+  const onOptionMouseenter = (e, option, idx) => {
+    contextTooltipId += 1;
+    const invokedContextTooltipId = contextTooltipId
+
+    setTimeout(() => {
+      if (contextTooltipId === invokedContextTooltipId) {
+        contextTooltipAnchor = e.target;
+        previousContextTooltipOption = contextTooltipOption;
+        contextTooltipOption = option;
+        contextTooltipVisible = true;
+      }
+    }, 200)
+  }
+
+  const onOptionMouseleave = (e, option) => {
+    setTimeout(() => {
+      if (option === contextTooltipOption) {
+        contextTooltipVisible = false;
+      }
+    }, 600)
+  }
 </script>
 
 <Multiselect
   iconPosition="right"
   {isOptionEnabled}
-  {getOptionIcon}
-  {getOptionIconTooltip}
-  {getOptionTooltip}
   {placeholder}
   value={boundValue}
   on:change={setValue}
   {options}
   align="right"
+  {onOptionMouseenter}
+  {onOptionMouseleave}
 />
+<ContextTooltip
+  visible={contextTooltipVisible}
+  anchor={contextTooltipAnchor}
+  offset={20}
+>
+  <div
+    class="tooltipContents"
+  >
+    {#if contextTooltipOption}
+      <div class="contextTooltipHeader">
+        <Icon name={getOptionIcon(contextTooltipOption)} />
+        <span>{contextTooltipOption}</span>
+      </div>
+      <p>{getOptionTooltip(contextTooltipOption)}</p>
+    {/if}
+  </div>
+  <div slot="previous"
+    class="tooltipContents"
+  >
+    {#if previousContextTooltipOption}
+      <div class="contextTooltipHeader">
+        <Icon name={getOptionIcon(previousContextTooltipOption)} />
+        <span>{previousContextTooltipOption}</span>
+      </div>
+      <p>{getOptionTooltip(previousContextTooltipOption)}</p>
+    {/if}
+  </div>
+</ContextTooltip>
+
+<style>
+  .tooltipContents {
+    max-width: 200px;
+    background-color: var(--spectrum-global-color-gray-200);
+    display: inline-block;
+    padding: 12px;
+    border-radius: 5px;
+    box-sizing: border-box;
+  }
+
+  .contextTooltipHeader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--spectrum-alias-item-height-m);
+    padding: 0px var(--spectrum-alias-item-padding-m);
+    border-width: var(--spectrum-actionbutton-border-size);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    border: 1px solid
+      var(
+        --spectrum-actionbutton-m-border-color,
+        var(--spectrum-alias-border-color)
+      );
+  }
+
+  .contextTooltipHeader :global(svg) {
+    color: var(--background);
+    margin-right: 5px;
+  }
+
+  .contextTooltipHeader :global(span) {
+ white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  }
+</style>