BugFix: #88

bizmatch/src/app/components/base-input/base-input.component.ts

@@ -19,6 +19,7 @@ export abstract class BaseInputComponent implements ControlValueAccessor {
   @Input() label: string = '';
   // @Input() id: string = '';
   @Input() name: string = '';
+  isTooltipVisible = false;
   constructor(protected validationMessagesService: ValidationMessagesService) {}
   ngOnInit() {
     this.subscription = this.validationMessagesService.messages$.subscribe(() => {
@@ -51,4 +52,9 @@ export abstract class BaseInputComponent implements ControlValueAccessor {
     this.validationMessage = this.validationMessagesService.getMessage(this.name);
   }
   setDisabledState?(isDisabled: boolean): void {}
+  toggleTooltip(event: Event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isTooltipVisible = !this.isTooltipVisible;
+  }
 }

bizmatch/src/app/components/tooltip/tooltip.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, Input, SimpleChanges } from '@angular/core';
 import { initFlowbite } from 'flowbite';
 
 @Component({
@@ -9,11 +9,36 @@ import { initFlowbite } from 'flowbite';
   templateUrl: './tooltip.component.html',
 })
 export class TooltipComponent {
-  @Input() id;
+  @Input() id: string;
-  @Input() text;
+  @Input() text: string;
+  @Input() isVisible: boolean = false;
+
   ngOnInit() {
+    this.initializeTooltip();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['isVisible']) {
+      this.updateTooltipVisibility();
+    }
+  }
+
+  private initializeTooltip() {
     setTimeout(() => {
       initFlowbite();
     }, 10);
   }
+
+  private updateTooltipVisibility() {
+    const tooltipElement = document.getElementById(this.id);
+    if (tooltipElement) {
+      if (this.isVisible) {
+        tooltipElement.classList.remove('invisible', 'opacity-0');
+        tooltipElement.classList.add('visible', 'opacity-100');
+      } else {
+        tooltipElement.classList.remove('visible', 'opacity-100');
+        tooltipElement.classList.add('invisible', 'opacity-0');
+      }
+    }
+  }
 }

bizmatch/src/app/components/validated-city/validated-city.component.html

@@ -4,10 +4,12 @@
     <div
       attr.data-tooltip-target="tooltip-{{ name }}"
       class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
+      (click)="toggleTooltip($event)"
+      (touchstart)="toggleTooltip($event)"
     >
       !
     </div>
-    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage" [isVisible]="isTooltipVisible"></app-tooltip>
     }
   </label>
   <ng-select

bizmatch/src/app/components/validated-county/validated-county.component.html

@@ -5,10 +5,12 @@
     <div
       attr.data-tooltip-target="tooltip-{{ name }}"
       class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
+      (click)="toggleTooltip($event)"
+      (touchstart)="toggleTooltip($event)"
     >
       !
     </div>
-    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage" [isVisible]="isTooltipVisible"></app-tooltip>
     }
   </label>
   }

bizmatch/src/app/components/validated-input/validated-input.component.html

@@ -5,10 +5,12 @@
     <div
       attr.data-tooltip-target="tooltip-{{ name }}"
       class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
+      (click)="toggleTooltip($event)"
+      (touchstart)="toggleTooltip($event)"
     >
       !
     </div>
-    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage" [isVisible]="isTooltipVisible"></app-tooltip>
     }
   </label>
   <input

bizmatch/src/app/components/validated-ng-select/validated-ng-select.component.html

@@ -4,10 +4,12 @@
     <div
       attr.data-tooltip-target="tooltip-{{ name }}"
       class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
+      (click)="toggleTooltip($event)"
+      (touchstart)="toggleTooltip($event)"
     >
       !
     </div>
-    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage" [isVisible]="isTooltipVisible"></app-tooltip>
     }
   </label>
   <ng-select [items]="items" bindLabel="name" bindValue="value" [(ngModel)]="value" (ngModelChange)="onInputChange($event)" name="type"> </ng-select>

bizmatch/src/app/components/validated-price/validated-price.component.html

@@ -6,10 +6,12 @@
     <div
       attr.data-tooltip-target="tooltip-{{ name }}"
       class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
+      (click)="toggleTooltip($event)"
+      (touchstart)="toggleTooltip($event)"
     >
       !
     </div>
-    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage" [isVisible]="isTooltipVisible"></app-tooltip>
     }
   </label>
   }

bizmatch/src/app/components/validated-quill/validated-quill.component.html

@@ -4,10 +4,12 @@
   <div
     attr.data-tooltip-target="tooltip-{{ name }}"
     class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
+    (click)="toggleTooltip($event)"
+    (touchstart)="toggleTooltip($event)"
   >
     !
   </div>
-  <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+  <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage" [isVisible]="isTooltipVisible"></app-tooltip>
   }
 </label>
 <quill-editor [(ngModel)]="value" (ngModelChange)="onInputChange($event)" (onBlur)="onTouched()" [id]="name" [attr.name]="name" [modules]="quillModules"></quill-editor>

bizmatch/src/app/components/validated-select/validated-select.component.html

@@ -5,10 +5,12 @@
     <div
       attr.data-tooltip-target="tooltip-{{ name }}"
       class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
+      (click)="toggleTooltip($event)"
+      (touchstart)="toggleTooltip($event)"
     >
       !
     </div>
-    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage" [isVisible]="isTooltipVisible"></app-tooltip>
     }
   </label>
   <select

bizmatch/src/app/components/validated-textarea/validated-textarea.component.html

@@ -5,10 +5,12 @@
     <div
       attr.data-tooltip-target="tooltip-{{ name }}"
       class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
+      (click)="toggleTooltip($event)"
+      (touchstart)="toggleTooltip($event)"
     >
       !
     </div>
-    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage" [isVisible]="isTooltipVisible"></app-tooltip>
     }
   </label>
   <textarea [id]="name" [ngModel]="value" (ngModelChange)="onInputChange($event)" [attr.name]="name" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>