wip

packages/bbui/src/Tooltip/Context.svelte

@@ -157,8 +157,6 @@
 
     border-radius: 5px;
     box-sizing: border-box;
-    opacity: 0;
-    overflow: hidden;
     border: 1px solid var(--grey-4);
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte

@@ -16,7 +16,7 @@
       }
 
       if (["string", "number", "boolean"].includes(schema.type)) {
-        newScalarDescendants.push(path.join("."))
+        newScalarDescendants.push({ name: path.join("."), type: schema.type })
       } else if (schema.type === "json") {
         Object.entries(schema.schema ?? {}).forEach(([childName, childSchema]) => 
         getScalarDescendantFromSchema([...path, childName], childSchema))
@@ -39,24 +39,26 @@
 
   {#if scalarDescendants.length > 0}
     <Section>
-      Examples of scalar descendants of this object are:
+      Examples scalar descendants of this object:
-      {#if scalarDescendants[0]}
+      <br />
-        <Block>{scalarDescendants[0]}</Block>
+
-      {/if}
+      {#each scalarDescendants as descendant}
-      {#if scalarDescendants.length === 2}
+        <div class="example">
-        {" and "}
+          <Block truncate>{descendant.name}</Block><span class="separator">-</span><Block truncate noShrink>{descendant.type}</Block>
-      {:else if scalarDescendants.length === 3}
+          </div>
-        {", "}
+      {/each}
-      {/if}
-      {#if scalarDescendants[1]}
-        <Block>{scalarDescendants[1]}</Block>
-      {/if}
-      {#if scalarDescendants.length === 3}
-        {" and "}
-      {/if}
-      {#if scalarDescendants[2]}
-        <Block>{scalarDescendants[2]}</Block>
-      {/if}
     </Section>
   {/if}
 </Subject>
+
+<style>
+  .example {
+    display: flex;
+    margin-bottom: 2px;
+  }
+
+  .separator {
+    margin: 0 4px;
+    flex-shrink: 0;
+  }
+</style>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte

@@ -1,4 +1,8 @@
-<span class="block">
+<script>
+  export let truncate = false
+  export let noShrink = false
+</script>
+<span class:truncate class:noShrink class="block">
   <slot />
 </span>
 
@@ -11,4 +15,14 @@
     color: var(--ink);
     word-break: break-word;
   }
+
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .noShrink {
+    flex-shrink: 0;
+  }
 </style>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte

@@ -8,4 +8,8 @@
     margin-bottom: 13px;
     overflow: hidden;
   }
+
+  .section :global(ul) {
+    padding-left: 24px;
+  }
 </style>

packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte

@@ -9,7 +9,6 @@
 <Line>
   <InfoWord
   on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
-  on:mouseleave={() => setExplanationSubject(subjects.none)}
 >Scalar JSON values</InfoWord>
   <Text
     value=" can be used with this component if their individual types are supported"

packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte

@@ -31,7 +31,7 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    row-gap: 4px;
+    row-gap: 3px;
   }
 
   .noWrap {