fix(ui): properly position help icon for tooltips next to form fields (…

…#1511) Co-authored-by: Simon <simon@aam-digital.com>
Aam-Digital · Nov 3, 2022 · fae1596 · fae1596
1 parent 4366ff9
commit fae1596
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/src/app/core/config/config-fix.ts b/src/app/core/config/config-fix.ts
@@ -958,7 +958,8 @@ export const defaultJsonConfig = {
         "name": "motherTongue",
         "schema": {
           dataType: "string",
-          label: $localize`:Label for the mother tongue of a child:Mother Tongue`
+          label: $localize`:Label for the mother tongue of a child:Mother Tongue`,
+          description: $localize`:Tooltip description for the mother tongue of a child:The primary language spoken at home`,
         }
       },
       {

diff --git a/src/app/core/entity-components/entity-form/entity-form/entity-form.component.html b/src/app/core/entity-components/entity-form/entity-form/entity-form.component.html
@@ -39,24 +39,25 @@
   <form class="columns-wrapper">
     <div *ngFor="let col of _columns; let i=index" class="column-group">
       <h2 *ngIf="columnHeaders && columnHeaders[i]">{{columnHeaders[i]}}</h2>
-      <div
-        *ngFor="let row of col"
-        [appDynamicComponent]="{
-          component: row.edit,
-          config: {
-            formFieldConfig: row,
-            propertySchema: entity.getSchema().get(row.id),
-            formControl: form.get(row.id)
-          }
-        }"
-      >
+      <div *ngFor="let row of col">
+        <div [class.field-with-tooltip-suffix]="row.tooltip">
+          <ng-container [appDynamicComponent]="{
+        component: row.edit,
+        config: {
+        formFieldConfig: row,
+        propertySchema: entity.getSchema().get(row.id),
+        formControl: form.get(row.id)
+        }
+        }"></ng-container>
+        </div>
         <fa-icon
           (click)="tooltipElement.show()"
           #tooltipElement="matTooltip"
           *ngIf="row.tooltip"
           matSuffix
           icon="question-circle"
           [matTooltip]="row.tooltip"
+          class="tooltip-suffix"
         ></fa-icon>
       </div>
 

diff --git a/src/app/core/entity-components/entity-form/entity-form/entity-form.component.scss b/src/app/core/entity-components/entity-form/entity-form/entity-form.component.scss
@@ -39,3 +39,12 @@ $max-screen-width: $min-block-width + $margin-main-view-right + $margin-main-vie
   margin-bottom: 20px !important;
   font-family: sans-serif;
 }
+
+.field-with-tooltip-suffix {
+  width: calc(100% - 24px);
+  display: inline-block;
+}
+
+.tooltip-suffix {
+  margin: 4px;
+}
diff --git a/src/app/core/entity-components/entity-form/entity-form/entity-form.stories.ts b/src/app/core/entity-components/entity-form/entity-form/entity-form.stories.ts
@@ -49,6 +49,7 @@ const cols = [
     {
       id: "projectNumber",
       edit: "EditNumber",
+      tooltip: "some extra explanation",
     },
     {
       edit: "EditLongText",