Add info icons with help text on hover for data page

microbit-foundation · Dec 11, 2023 · a3627ab · a3627ab
1 parent d7c99f5
commit a3627ab
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/components/information/Information.svelte b/src/components/information/Information.svelte
@@ -39,19 +39,23 @@
 </script>
 
 <div
-  class="cursor-pointer w-auto flex"
-  on:mouseenter={() => onMouseEnter()}
-  on:mouseleave={() => (isOpen = false)}
+  class="w-auto flex"
   bind:clientWidth={w}
   bind:clientHeight={h}
   bind:this={domNode}>
   {#if iconText !== undefined}
     <p
-      class="text-white w-auto h-auto mr-0 whitespace-pre-line"
+      class="text-white w-auto h-auto mr-0 whitespace-pre-line pr-1"
       class:underline={underlineIconText}
       style="color: {colors.iconTextColor}">
       {iconText}
     </p>
+    <i
+      class="fas fa-info-circle cursor-pointer"
+      style="color: {colors.iconTextColor}; vertical-align: middle;"
+      on:mouseenter={() => onMouseEnter()}
+      on:mouseleave={() => (isOpen = false)}
+    />
   {/if}
 
   {#if isOpen}

diff --git a/src/pages/DataPage.svelte b/src/pages/DataPage.svelte
@@ -88,19 +88,21 @@
           <div class="absolute left-3 flex">
             <Information
               isLightTheme={false}
+              underlineIconText={false}
               iconText={$t('content.data.classification')}
               titleText={$t('content.data.classHelpHeader')}
               bodyText={$t('content.data.classHelpBody')} />
           </div>
           <div class="absolute left-55 flex">
-            <Information isLightTheme={false} iconText={$t('content.data.choice')}>
+            <Information isLightTheme={false} iconText={$t('content.data.choice')} underlineIconText={false}>
               <RecordInformationContent isLightTheme={false} />
             </Information>
           </div>
           {#if hasSomeData()}
             <div class="absolute left-92 flex">
               <Information
                 isLightTheme={false}
+                underlineIconText={false}
                 iconText={$t('content.data.data')}
                 titleText={$t('content.data.data')}
                 bodyText={$t('content.data.dataDescription')} />