feat: add tooltips for html question (#2480)

Author: MwanPygmay

libs/shared/src/lib/components/dashboard-filter/filter-builder-modal/filter-builder-modal.component.ts

@@ -2,6 +2,7 @@ import {
   AfterViewInit,
   Component,
   Inject,
+  OnChanges,
   OnDestroy,
   OnInit,
 } from '@angular/core';
@@ -166,7 +167,7 @@ const CORE_QUESTION_ALLOWED_PROPERTIES = [
   ],
 })
 export class FilterBuilderModalComponent
-  implements OnInit, AfterViewInit, OnDestroy
+  implements OnInit, AfterViewInit, OnChanges, OnDestroy
 {
   /** Survey creator instance */
   surveyCreator!: SurveyCreatorModel;
@@ -201,6 +202,14 @@ export class FilterBuilderModalComponent
     this.setFormBuilder();
   }
 
+  ngOnChanges(): void {
+    if (this.surveyCreator) {
+      this.surveyCreator.survey.onAfterRenderQuestion.add(
+        this.formHelpersService.addQuestionTooltips
+      );
+    }
+  }
+
   /**
    * Creates the form builder and sets up all the options.
    */
@@ -214,6 +223,13 @@ export class FilterBuilderModalComponent
     };
     this.surveyCreator = new SurveyCreatorModel(creatorOptions);
 
+    this.surveyCreator.onPreviewSurveyCreated.add((_: any, options: any) => {
+      const survey: SurveyModel = options.survey;
+      survey.onAfterRenderQuestion.add(
+        this.formHelpersService.addQuestionTooltips
+      );
+    });
+
     new SurveyCustomJSONEditorPlugin(this.surveyCreator);
 
     // this.surveyCreator.text = '';
@@ -247,13 +263,15 @@ export class FilterBuilderModalComponent
 
     // add the rendering of custom properties
     this.surveyCreator.survey.onAfterRenderQuestion.add(
-      renderGlobalProperties(this.referenceDataService, this.http) as any
+      renderGlobalProperties(this.referenceDataService, this.http)
     );
-    (this.surveyCreator.onTestSurveyCreated as any).add(
-      (sender: any, opt: any) =>
-        opt.survey.onAfterRenderQuestion.add(
-          renderGlobalProperties(this.referenceDataService, this.http)
-        )
+    this.surveyCreator.survey.onAfterRenderQuestion.add(
+      this.formHelpersService.addQuestionTooltips
+    );
+    this.surveyCreator.onPreviewSurveyCreated.add((sender: any, opt: any) =>
+      opt.survey.onAfterRenderQuestion.add(
+        renderGlobalProperties(this.referenceDataService, this.http)
+      )
     );
 
     this.surveyCreator.onPropertyGridShowModal.add(updateModalChoicesAndValue);

libs/shared/src/lib/components/form-builder/form-builder.component.ts

@@ -195,7 +195,7 @@ export class FormBuilderComponent
 
       // add the rendering of custom properties
       this.surveyCreator.survey.onAfterRenderQuestion.add(
-        renderGlobalProperties(this.referenceDataService, this.http) as any
+        renderGlobalProperties(this.referenceDataService, this.http)
       );
       this.surveyCreator.survey.onAfterRenderQuestion.add(
         this.formHelpersService.addQuestionTooltips
@@ -228,18 +228,16 @@ export class FormBuilderComponent
 
     this.surveyCreator = new SurveyCreatorModel(creatorOptions);
 
-    (this.surveyCreator.onTestSurveyCreated as any).add(
-      (_: any, options: any) => {
-        const survey: SurveyModel = options.survey;
-        survey.applyTheme({
-          isPanelless: true,
-        });
-        survey.onAfterRenderQuestion.add(
-          this.formHelpersService.addQuestionTooltips
-        );
-        this.formHelpersService.addUserVariables(survey);
-      }
-    );
+    this.surveyCreator.onPreviewSurveyCreated.add((_: any, options: any) => {
+      const survey: SurveyModel = options.survey;
+      survey.applyTheme({
+        isPanelless: true,
+      });
+      survey.onAfterRenderQuestion.add(
+        this.formHelpersService.addQuestionTooltips
+      );
+      this.formHelpersService.addUserVariables(survey);
+    });
     this.surveyCreator.haveCommercialLicense = true;
     this.surveyCreator.text = structure;
     this.surveyCreator.saveSurveyFunc = this.saveMySurvey;
@@ -327,17 +325,16 @@ export class FormBuilderComponent
 
     // add the rendering of custom properties
     this.surveyCreator.survey.onAfterRenderQuestion.add(
-      renderGlobalProperties(this.referenceDataService, this.http) as any
+      renderGlobalProperties(this.referenceDataService, this.http)
     );
     this.surveyCreator.survey.onAfterRenderQuestion.add(
-      this.formHelpersService.addQuestionTooltips as any
+      this.formHelpersService.addQuestionTooltips
     );
 
-    (this.surveyCreator.onTestSurveyCreated as any).add(
-      (sender: any, options: any) =>
-        options.survey.onAfterRenderQuestion.add(
-          renderGlobalProperties(this.referenceDataService, this.http)
-        )
+    this.surveyCreator.onPreviewSurveyCreated.add((sender: any, options: any) =>
+      options.survey.onAfterRenderQuestion.add(
+        renderGlobalProperties(this.referenceDataService, this.http)
+      )
     );
 
     this.surveyCreator.onPropertyGridShowModal.add(updateModalChoicesAndValue);
@@ -417,14 +414,13 @@ export class FormBuilderComponent
    * @param coreFields list of core fields
    */
   private addCustomClassToCoreFields(coreFields: string[]): void {
-    this.surveyCreator.survey.onAfterRenderQuestion.add(((
-      survey: SurveyModel,
-      options: any
-    ) => {
-      if (coreFields.includes(options.question.valueName)) {
-        options.htmlElement.children[0].className += ` ${CORE_FIELD_CLASS}`;
+    this.surveyCreator.survey.onAfterRenderQuestion.add(
+      (survey: SurveyModel, options: any) => {
+        if (coreFields.includes(options.question.valueName)) {
+          options.htmlElement.children[0].className += ` ${CORE_FIELD_CLASS}`;
+        }
       }
-    }) as any);
+    );
   }
 
   /**

libs/shared/src/lib/services/form-helper/form-helper.service.ts

@@ -368,26 +368,42 @@ export class FormHelpersService {
    *
    * @param survey current survey
    * @param options current survey question options
+   * @param options.question current question
+   * @param options.htmlElement html element associated to question
    */
-  public addQuestionTooltips(survey: any, options: any): void {
+  public addQuestionTooltips(
+    survey: SurveyModel,
+    options: { question: Question; htmlElement: HTMLElement }
+  ): void {
     //Return if there is no description to show in popup
     if (!options.question.tooltip) {
       return;
     }
-    const titleElement = (options.htmlElement as HTMLElement).querySelector(
+    const titleElement = options.htmlElement.querySelector(
       '.sd-question__title'
     );
+    const createTooltip = (htmlElement: Element) => {
+      const tooltip = document.createElement('span');
+      tooltip.title = options.question.tooltip || '';
+      tooltip.innerHTML = '?';
+      tooltip.classList.add('survey-title__tooltip');
+      htmlElement.appendChild(tooltip);
+    };
     if (titleElement) {
       const selector = survey.isDesignMode
         ? '.svc-string-editor'
         : '.sv-string-viewer';
-      titleElement.querySelectorAll(selector).forEach((el: any) => {
-        const tooltip = document.createElement('span');
-        tooltip.title = options.question.tooltip;
-        tooltip.innerHTML = '?';
-        tooltip.classList.add('survey-title__tooltip');
-        el.appendChild(tooltip);
+      titleElement.querySelectorAll(selector).forEach((el: Element) => {
+        createTooltip(el);
       });
+    } else if (options.question.getType() === 'html') {
+      const wrapper = document.createElement('div');
+      wrapper.classList.add('flex', 'items-center');
+      const htmlQuestion = options.htmlElement.querySelector('.sd-html');
+      if (!htmlQuestion) return;
+      htmlQuestion.parentNode?.insertBefore(wrapper, htmlQuestion);
+      wrapper.appendChild(htmlQuestion);
+      createTooltip(wrapper);
     }
   }
 

libs/shared/src/lib/style/survey.scss

@@ -70,6 +70,8 @@
   margin-left: 0.25rem;
   font-size: 0.75rem !important;
   font-weight: bold;
+  height: 17px;
+  line-height: 17px;
 }
 
 ::ng-deep .sd-matrixdropdown.sd-table,