@klippa/ngx-enhancy-forms 20.0.8 → 20.0.10

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

@@ -2943,9 +2943,10 @@ class WithTooltipDirective {
                         return;
                     }
                 }
-                if (getComputedStyle(el.nativeElement).position === 'static') {
-                    el.nativeElement.style.position = 'relative';
-                }
+                this.hookDiv = document.createElement('div');
+                this.hookDiv.style.position = 'absolute';
+                this.hookDiv.style.transform = 'translate(0, 0)';
+                el.nativeElement.prepend(this.hookDiv);
                 this.div = document.createElement('div');
                 this.div.style.zIndex = `${zIndexStart + 2}`;
                 this.div.style.color = `${colors[this.klpWithTooltip].noAlpha}`;
@@ -2982,7 +2983,7 @@ class WithTooltipDirective {
                         this.div.style.visibility = 'visible';
                     });
                 }
-                el.nativeElement.prepend(this.div);
+                this.hookDiv.prepend(this.div);
                 this.triangle = document.createElement('div');
                 this.triangle.style.zIndex = `${zIndexStart + 1}`;
                 this.triangle.style.position = 'fixed';
@@ -2997,7 +2998,7 @@ class WithTooltipDirective {
                 this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
                 this.triangle.style.borderRight = `${triangleSize} solid transparent`;
                 this.triangle.style.borderTop = `${triangleSize} solid ${colors[this.klpWithTooltip].withAlpha}`;
-                el.nativeElement.prepend(this.triangle);
+                this.hookDiv.prepend(this.triangle);
                 this.triangleWhite = document.createElement('div');
                 this.triangleWhite.style.zIndex = `${zIndexStart + 3}`;
                 this.triangleWhite.style.position = 'fixed';
@@ -3022,7 +3023,7 @@ class WithTooltipDirective {
                         this.div.style.visibility = 'visible';
                     });
                 }
-                el.nativeElement.prepend(this.triangleWhite);
+                this.hookDiv.prepend(this.triangleWhite);
             });
             el.nativeElement.addEventListener('mouseleave', () => {
                 if (this.tooltipTemplate) {
@@ -3040,6 +3041,10 @@ class WithTooltipDirective {
                     el.nativeElement.removeChild(this.triangleWhite);
                 }
                 catch (ex) { }
+                try {
+                    el.nativeElement.removeChild(this.hookDiv);
+                }
+                catch (ex) { }
             });
         });
     }