@chat21/chat21-web-widget 5.0.53-rc.1 → 5.0.53-rc.3

package/.github/workflows/docker-community-push-latest.yml

@@ -19,4 +19,5 @@ jobs:
         username: ${{ secrets.DOCKERHUB_USERNAME }}
         password: ${{ secrets.DOCKERHUB_TOKEN }}
         repository: chat21/chat21-web-widget
+        push: true
         tags: latest

package/.github/workflows/docker-image-tag-community-tag-push.yml

@@ -18,4 +18,5 @@ jobs:
         username: ${{ secrets.DOCKERHUB_USERNAME }}
         password: ${{ secrets.DOCKERHUB_TOKEN }}
         repository: chat21/chat21-web-widget
+        push: true
         tag_with_ref: true

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.53-rc.3
+- added: html descriptions to index.html and index-dev.html
+- changed: script tag for style.css to link tag with rel="stylesheet"
+- changed: binding to tiledesk iframe from scr to srcdoc 
+- removed: base_script.html 
+- removed: jquery plugin
+- removed: relativeLinkResolution from forRoot in RooterModule
+
+
+### 5.0.53-rc.2
+- added: angular 15 engine
+- added: custom tooltip directive
+- changed: buildOptimization ng build parameter to build-optimization
+- removed: ng2-tooltip-directive and ng2-tooltip-directive-ng13fix
+- removed: initializatoin of abstract variables in chat21-core abstract providers
+- removed: enableIvy parameter from tsconfig.json
+
 ### 5.0.53-rc.1
 - added: Rules class (work in progress)
 - added: base_script.html to load element inside tiledesk-iframe

package/Dockerfile

@@ -1,7 +1,7 @@
 ### STAGE 1: Build ###
 
 # We label our stage as ‘builder’
-FROM node:12.20.2-alpine as builder
+FROM node:14.21.2-alpine as builder
 
 COPY package.json package-lock.json ./
 
@@ -15,7 +15,7 @@ COPY . .
 
 ## Build the angular app in production mode and store the artifacts in dist folder
 
-RUN npm run ng build -- --configuration="prod" --output-path=dist --base-href="./" --output-hashing=none --buildOptimizer=false --vendor-chunk
+RUN npm run ng build -- --configuration="prod" --output-path=dist --base-href="./" --output-hashing=none --build-optimizer=false --vendor-chunk
 
 
 ### STAGE 2: Setup ###

package/angular.json

@@ -1,7 +1,6 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
-  "defaultProject": "widget",
   "newProjectRoot": "projects",
   "projects": {
     "widget": {
@@ -43,21 +42,20 @@
             ],
             "styles": [
               "src/app/sass/styles.scss",
-              "node_modules/@ctrl/ngx-emoji-mart/picker.css",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js",
-              "node_modules/popper.js/dist/umd/popper.min.js"
+              "node_modules/@ctrl/ngx-emoji-mart/picker.css"
             ],
             "scripts": [
               "src/assets/js/mqtt/4.2.6/mqtt.min.js",
-              "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js"
+              "node_modules/bootstrap/dist/js/bootstrap.min.js",
+              "node_modules/popper.js/dist/umd/popper.min.js"
             ],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,
             "allowedCommonJsDependencies": [
               "rxjs-compat",
-              "moment"
+              "moment",
+              "idb"
             ],
             "sourceMap": true,
             "optimization": false,
@@ -144,8 +142,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [
@@ -159,19 +156,6 @@
             "codeCoverage": true
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {

package/deploy_amazon_beta.sh

@@ -2,7 +2,7 @@
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
-ng build --configuration="pre" --aot=true --base-href --output-hashing none --buildOptimizer=true
+ng build --configuration="pre" --aot=true --base-href --output-hashing none --build-optimizer=true
 
 # ########## --->>>> NATIVE-MQTT folder START <<<<<------ ########## #
 

package/deploy_amazon_prod.sh

@@ -3,7 +3,7 @@ version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
 # --build-optimizer=false if localstorage is disabled (webview) appears https://github.com/firebase/angularfire/issues/970
-ng build --configuration="prod" --aot=true --base-href --output-hashing none --buildOptimizer=true --vendor-chunk=true
+ng build --configuration="prod" --aot=true --base-href --output-hashing none --build-optimizer=true --vendor-chunk=true
 
 cd dist
 # aws s3 sync . s3://tiledesk-widget/v5/latest/

package/karma.conf.js

@@ -7,6 +7,7 @@ module.exports = function (config) {
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
+      require('karma-coverage'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.53-rc.1",
-  "license": "MIT License",
+  "version": "5.0.53-rc.3",
+  "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
     "type": "git",
@@ -18,18 +18,18 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^12.2.16",
-    "@angular/cdk": "^12.2.13",
-    "@angular/common": "^12.2.16",
-    "@angular/compiler": "~12.2.16",
-    "@angular/core": "~12.2.16",
-    "@angular/forms": "~12.2.16",
-    "@angular/localize": "^12.2.16",
-    "@angular/platform-browser": "^12.2.16",
-    "@angular/platform-browser-dynamic": "~12.2.16",
-    "@angular/router": "~12.2.16",
-    "@ctrl/ngx-emoji-mart": "^5.1.2",
-    "@ngx-translate/core": "^12.1.2",
+    "@angular/animations": "^15.0.4",
+    "@angular/cdk": "^15.0.3",
+    "@angular/common": "^15.0.4",
+    "@angular/compiler": "^15.0.4",
+    "@angular/core": "^15.0.4",
+    "@angular/forms": "^15.0.4",
+    "@angular/localize": "^15.0.4",
+    "@angular/platform-browser": "^15.0.4",
+    "@angular/platform-browser-dynamic": "^15.0.4",
+    "@angular/router": "^15.0.4",
+    "@ctrl/ngx-emoji-mart": "^7.1.0",
+    "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^4.0.0",
     "@popperjs/core": "^2.11.5",
     "@types/marked": "^4.0.3",
@@ -38,10 +38,8 @@
     "file-saver": "^2.0.5",
     "firebase": "^8.6.7",
     "humanize-duration-ts": "^2.1.1",
-    "jquery": "^3.6.0",
     "marked": "^4.0.16",
     "moment": "^2.29.3",
-    "ng2-tooltip-directive": "^2.10.3",
     "ngx-logger": "^5.0.11",
     "ngx-moment": "^6.0.2",
     "popper.js": "^1.16.1",
@@ -51,10 +49,10 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.17",
-    "@angular/cli": "~12.2.17",
-    "@angular/compiler-cli": "~12.2.16",
-    "@angular/language-service": "~12.2.16",
+    "@angular-devkit/build-angular": "^15.0.4",
+    "@angular/cli": "^15.0.4",
+    "@angular/compiler-cli": "^15.0.4",
+    "@angular/language-service": "^15.0.4",
     "@types/jasmine": "^3.6.11",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
@@ -63,12 +61,13 @@
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.3.20",
     "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "^2.2.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.3.5"
+    "typescript": "^4.8.4"
   }
 }

package/src/app/app-routing.module.ts

@@ -5,7 +5,7 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

package/src/app/app.component.scss

@@ -5,7 +5,7 @@
 @import 'src/app/sass/variables';
 @import url('./sass/animations.scss');
 @import url("./sass/hover.css");
-@import '~@ctrl/ngx-emoji-mart/picker';
+@import '@ctrl/ngx-emoji-mart/picker';
 // @import "~bootstrap/dist/css/bootstrap.css";
 /** custom scroll bar **/
 input, select:focus, textarea {
@@ -47,15 +47,6 @@ input, select:focus, textarea {
     --button-in-msg-font-size: 15px;
 }
 
-.chat-tooltip {
-    font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
-    font-size: 12px;
-    font-style: normal;
-    letter-spacing: normal;
-    font-stretch: normal;
-    font-variant: normal;
-    font-weight: 300;
-}
 
 body {
     margin:0px;
@@ -216,7 +207,44 @@ textarea::placeholder {
         }
     }
     
+}
+
+.tooltip-container {
+    font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    letter-spacing: normal;
+    font-stretch: normal;
+    font-variant: normal;
+    font-weight: 300;
+    z-index: 100;
+    position: fixed;
+    padding: 6px 12px;
+    line-height: initial;
+    color: black;
+    width: auto;
+    background:rgb(255, 255, 255);
+    border-radius: 10px;
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); 
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+    box-sizing: border-box;
+    opacity: 0;
+    transform: translate(-80%, -70%);
+    animation: tooltip-slide 0.18s ease-out 0.5s;
+    animation-fill-mode: forwards;
+    pointer-events: none;
+}
+
+@keyframes tooltip-slide {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -70%);
   }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
 
 chat-root {
     position: absolute;

package/src/app/app.module.ts

@@ -57,7 +57,6 @@ import { environment } from 'src/environments/environment';
 //THIRD-PART MODULES
 import { TranslateModule } from '@ngx-translate/core';
 import { MomentModule } from 'ngx-moment';
-import { TooltipModule } from 'ng2-tooltip-directive';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { INGXLoggerMetadata, LoggerModule, NGXLogger, NgxLoggerLevel, NGXLoggerServerService, TOKEN_LOGGER_SERVER_SERVICE } from "ngx-logger";
 
@@ -128,6 +127,7 @@ import { WaitingService } from './providers/waiting.service';
 import { StarRatingWidgetService } from './providers/star-rating-widget.service';
 import { LikeUnlikeComponent } from './component/message/like-unlike/like-unlike.component';
 import { Rules } from './utils/rules';
+import { TooltipDirective } from 'src/app/directives/tooltip.directive';
 
 
 const appInitializerFn = (appConfig: AppConfigService, logger: NGXLogger) => {
@@ -283,7 +283,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     HtmlEntitiesEncodePipe,
     MarkedPipe,
     SafeHtmlPipe,
-    LikeUnlikeComponent
+    LikeUnlikeComponent,
+    TooltipDirective
   ],
   imports: [
     BrowserModule,
@@ -293,7 +294,6 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     FormsModule,
     ReactiveFormsModule,
     MomentModule,
-    TooltipModule,
     PickerModule,
     TranslateModule.forRoot(//),
     {

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -144,16 +144,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   dropEvent: Event
   // ========== end:: DRAG & DROP =======
 
-  tooltipOptions = {
-    'show-delay': 1500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
-
   translationMapHeader: Map<string, string>;
   translationMapFooter: Map<string, string>;
   translationMapContent: Map<string, string>;

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.spec.ts

@@ -1,5 +1,4 @@
 import { MomentModule } from 'ngx-moment';
-import { TooltipModule } from 'ng2-tooltip-directive';
 import { async, ComponentFixture, TestBed, waitForAsync, inject } from '@angular/core/testing';
 
 import { ConversationContentComponent } from './conversation-content.component';
@@ -36,7 +35,6 @@ describe('ConversationContentComponent', () => {
         HtmlEntitiesEncodePipe,
       ],
       imports: [
-        TooltipModule,
         MomentModule
       ],
       providers: [ 

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.ts

@@ -67,16 +67,6 @@ export class ConversationContentComponent implements OnInit {
   MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
   // ========== end:: check message type functions ======= //
 
-  tooltipOptions = {
-    'show-delay': 1500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
-
   urlBOTImage = 'https://s3.eu-west-1.amazonaws.com/tiledesk-widget/dev/2.0.4-beta.7/assets/images/avatar_bot_tiledesk.svg'
   uploadProgress: number;
   showUploadProgress: boolean = false;

package/src/app/component/form/form-builder/form-builder.component.ts

@@ -52,7 +52,7 @@ export class FormBuilderComponent implements OnInit {
     }
   }
 
-  buildFormGroup(inputJson: Array<FormArray>): FormGroup {
+  buildFormGroup(inputJson: Array<FormArray>): FormGroup<any> {
     let objectFormBuilder: { [key: string]: FormControl } = {}
     let restoreDefault = false;
     let initIndex:number = 1411;

package/src/app/component/form/inputs/form-checkbox/form-checkbox.component.ts

@@ -17,7 +17,7 @@ export class FormCheckboxComponent implements OnInit {
   @Input() hasSubmitted: boolean;
   @Output() onKeyEnterPressed = new EventEmitter<any>();
   
-  form: FormGroup;
+  form: FormGroup<any>;
   constructor(private rootFormGroup: FormGroupDirective,
               private elementRef: ElementRef) { }
 

package/src/app/component/form/inputs/form-label/form-label.component.ts

@@ -14,7 +14,7 @@ export class FormLabelComponent implements OnInit {
   @Input() controlName: string;
   @Input() hasSubmitted: boolean; 
 
-  form: FormGroup;
+  form: FormGroup<any>;
   constructor(private rootFormGroup: FormGroupDirective) { }
 
   ngOnInit() {

package/src/app/component/form/inputs/form-text/form-text.component.ts

@@ -18,13 +18,13 @@ export class FormTextComponent implements OnInit {
   @Output() onKeyEnterPressed = new EventEmitter<any>(); 
 
   @ViewChild('div_input') input: ElementRef;
-  form: FormGroup;
+  form: FormGroup<any>;
   inputType: string = 'text'
   constructor(private rootFormGroup: FormGroupDirective,
               private elementRef: ElementRef) { }
 
   ngOnInit() {
-    this.form = this.rootFormGroup.control as FormGroup;
+    this.form = this.rootFormGroup.control as FormGroup<any>;
     if(this.form && this.form.controls && this.form.controls[this.controlName]){
       this.form.controls[this.controlName].valueChanges.subscribe((value) => {
         this.hasSubmitted= false;

package/src/app/component/form/inputs/form-textarea/form-textarea.component.ts

@@ -17,12 +17,12 @@ export class FormTextareaComponent implements OnInit {
   @Input() hasSubmitted: boolean; 
   @Output() onKeyEnterPressed = new EventEmitter<any>();
   @ViewChild('div_input') input: ElementRef;
-  form: FormGroup;
+  form: FormGroup<any>;
   constructor(private rootFormGroup: FormGroupDirective,
               private elementRef: ElementRef) { }
 
   ngOnInit() {
-    this.form = this.rootFormGroup.control as FormGroup;
+    this.form = this.rootFormGroup.control as FormGroup<any>;
     if(this.form && this.form.controls && this.form.controls[this.controlName]){
       this.form.controls[this.controlName].valueChanges.subscribe((value) => {
         this.hasSubmitted= false;

package/src/app/component/form/prechat-form/prechat-form.component.ts

@@ -23,7 +23,7 @@ export class PrechatFormComponent implements OnInit, AfterViewInit {
 
 
   // ========= begin:: component variables ======= //
-  preChatFormGroup: FormGroup;
+  preChatFormGroup: FormGroup<any>;
   userFullname: string;
   userEmail: string;
   // ========= end:: component variables ======= //

package/src/app/component/message/bubble-message/bubble-message.component.html

@@ -46,10 +46,7 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
         
-      <div *ngIf="message?.text" [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left" contentType="template" (click)="handleTooltipEvents($event)"> 
-        <ng-template #timeTooltipLeft>
-          <span>{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})</span>
-        </ng-template> 
+      <div *ngIf="message?.text" tooltip="{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})"> 
 
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -6,7 +6,7 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 import { isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
-import { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES} from '../../../utils/constants';
+import { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES} from 'src/chat21-core/utils/constants';
 
 @Component({
   selector: 'chat-bubble-message',
@@ -35,16 +35,6 @@ export class BubbleMessageComponent implements OnInit {
   MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
   MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
  // ========== end:: check message type functions ======= //
-  
-  tooltipOptions = {
-    'show-delay': 500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
   sizeImage : { width: number, height: number}
 
   private logger: LoggerService = LoggerInstance.getInstance()
@@ -119,32 +109,6 @@ export class BubbleMessageComponent implements OnInit {
     return sizeImage
   }
 
-  /**
-  * function customize tooltip
-  */
- handleTooltipEvents(event) {
-  const that = this;
-  const showDelay = this.tooltipOptions['showDelay'];
-  setTimeout(function () {
-    try {
-      const domRepresentation = document.getElementsByClassName('chat-tooltip');
-      if (domRepresentation) {
-        const item = domRepresentation[0] as HTMLInputElement;
-        if (!item.classList.contains('tooltip-show')) {
-          item.classList.add('tooltip-show');
-        }
-        setTimeout(function () {
-          if (item.classList.contains('tooltip-show')) {
-            item.classList.remove('tooltip-show');
-          }
-        }, that.tooltipOptions['hideDelayAfterClick']);
-      }
-    } catch (err) {
-        that.logger.error('[BUBBLE-MESSAGE] handleTooltipEvents >>>> Error :' + err);
-    }
-  }, showDelay);
-}
-
   // ========= begin:: event emitter function ============//
 
   // returnOpenAttachment(event: String) {

package/src/app/component/message/image/image.component.ts

@@ -17,15 +17,7 @@ export class ImageComponent implements OnInit {
 
   loading: boolean = true
   tooltipMessage: string;
-  tooltipOptions = {
-    'show-delay': 0,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
+  
 
   popupUrl = popupUrl;
   

package/src/app/component/message/info-message/info-message.component.html

@@ -6,10 +6,10 @@
     </div>
       
     <div style="max-width: 70%;">
-        <span class="base_info" [innerHTML]="message?.text | marked" [options]="tooltipOptions" [tooltip]="timeTooltipLeft"  placement="left" contentType="template"></span>
-        <ng-template #timeTooltipLeft>
+        <span class="base_info" [innerHTML]="message?.text | marked" tooltip="{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})"  placement="left" contentType="template"></span>
+        <!-- <ng-template #timeTooltipLeft>
             <span>{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})</span>
-        </ng-template> 
+        </ng-template>  -->
     </div>
     
     <div class="spinner">

package/src/app/component/message/info-message/info-message.component.ts

@@ -15,16 +15,6 @@ export class InfoMessageComponent implements OnInit {
 
   public message_text: string
   private logger: LoggerService = LoggerInstance.getInstance()
-
-  tooltipOptions = {
-    'show-delay': 500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
   
   constructor() { }
 

package/src/app/directives/tooltip.directive.spec.ts

@@ -0,0 +1,8 @@
+import { TooltipDirective } from './tooltip.directive';
+
+describe('TooltipDirective', () => {
+  // it('should create an instance', () => {
+  //   const directive = new TooltipDirective();
+  //   expect(directive).toBeTruthy();
+  // });
+});

package/src/app/directives/tooltip.directive.ts

@@ -0,0 +1,46 @@
+import { Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
+
+@Directive({
+  selector: '[tooltip]'
+})
+export class TooltipDirective implements OnDestroy{
+
+  @Input() tooltip: any; // The text for the tooltip to display
+  @Input() delay? = 190; // Optional delay input, in ms
+
+  private myPopup;
+  private timer;
+
+  constructor(private el: ElementRef) { }
+
+  ngOnDestroy(): void {
+    if (this.myPopup) { this.myPopup.remove() }
+  }
+
+  @HostListener('mouseenter') onMouseEnter() {
+    this.timer = setTimeout(() => {
+      let x = this.el.nativeElement.getBoundingClientRect().left + this.el.nativeElement.offsetWidth / 2; // Get the middle of the element
+      let y = this.el.nativeElement.getBoundingClientRect().top + this.el.nativeElement.offsetHeight + 6; // Get the bottom of the element, plus a little extra
+      this.createTooltipPopup(x, y);
+    }, this.delay)
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    if (this.timer) clearTimeout(this.timer);
+    if (this.myPopup) { this.myPopup.remove() }
+  }
+
+  private createTooltipPopup(x: number, y: number) {
+    let popup = document.createElement('div');
+    popup.innerHTML = this.tooltip;
+    popup.setAttribute("class", "tooltip-container");
+    popup.style.top = y.toString() + "px";
+    popup.style.left = x.toString() + "px";
+    document.body.appendChild(popup);
+    this.myPopup = popup;
+    setTimeout(() => {
+      if (this.myPopup) this.myPopup.remove();
+    }, 5000); // Remove tooltip after 5 seconds
+  }
+
+}