@klippa/ngx-enhancy-forms 20.0.11 → 20.0.13

package/fesm2022/klippa-ngx-enhancy-forms.mjs

@@ -2946,7 +2946,7 @@ class WithTooltipDirective {
                 this.hookDiv = document.createElement('div');
                 const top = el.nativeElement.getBoundingClientRect().top;
                 const left = el.nativeElement.getBoundingClientRect().left;
-                el.nativeElement.prepend(this.hookDiv);
+                document.body.appendChild(this.hookDiv);
                 this.div = document.createElement('div');
                 this.div.style.zIndex = `${zIndexStart + 2}`;
                 this.div.style.color = `${colors[this.klpWithTooltip].noAlpha}`;
@@ -3019,7 +3019,6 @@ class WithTooltipDirective {
                     this.triangleWhite.style.top = `${top + el.nativeElement.getBoundingClientRect().height}px`;
                     this.triangleWhite.style.left = `${left}px`;
                     this.triangleWhite.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(0% - 0.15rem + 2px)) rotate(180deg)`;
-                    // this.triangleWhite.style.transform = `translate(${el.nativeElement.getBoundingClientRect().width}px) translateY(${el.nativeElement.getBoundingClientRect().height}px) translate(-100%, -2px) rotate(180deg)`;
                 }
                 this.triangleWhite.style.width = '0';
                 this.triangleWhite.style.height = '0';
@@ -3039,34 +3038,32 @@ class WithTooltipDirective {
                 this.hookDiv.prepend(this.triangleWhite);
             });
             el.nativeElement.addEventListener('mouseleave', () => {
-                if (this.tooltipTemplate) {
-                    this.cleanUpTemplate();
-                }
-                try {
-                    el.nativeElement.removeChild(this.div);
-                }
-                catch (ex) { }
-                try {
-                    el.nativeElement.removeChild(this.triangle);
-                }
-                catch (ex) { }
-                try {
-                    el.nativeElement.removeChild(this.triangleWhite);
-                }
-                catch (ex) { }
-                try {
-                    el.nativeElement.removeChild(this.hookDiv);
-                }
-                catch (ex) { }
+                this.cleanUpTooltipFromDom();
             });
         });
     }
+    cleanUpTooltipFromDom() {
+        if (this.tooltipTemplate) {
+            this.cleanUpTemplate();
+        }
+        try {
+            document.body.removeChild(this.hookDiv);
+        }
+        catch (ex) {
+        }
+    }
+    ngOnDestroy() {
+        this.cleanUpTooltipFromDom();
+    }
     hookUpTemplate() {
         this.viewRefForTemplate = this.tooltipTemplate.createEmbeddedView(null);
         this.appRef.attachView(this.viewRefForTemplate);
         this.templateInstance = this.viewRefForTemplate.rootNodes[0];
     }
     cleanUpTemplate() {
+        if (!isValueSet(this.viewRefForTemplate)) {
+            return;
+        }
         this.appRef.detachView(this.viewRefForTemplate);
         this.viewRefForTemplate.destroy();
     }