@dev-tcloud/tcloud-ui 0.1.18 → 0.1.19

package/fesm2020/dev-tcloud-tcloud-ui.mjs

@@ -4410,38 +4410,41 @@ class TCloudUiTooltipDirective {
             }
         };
         hoverOutCallback;
-        const scrollTop = window.scrollY || window.pageYOffset;
-        const tooltip = this.renderer.createElement('div');
-        const rect = this.el.nativeElement?.getBoundingClientRect();
-        const direction = this.el.nativeElement?.attributes['ng-reflect--t-cdirection']?.value || 'top';
-        const el_position_x = (rect?.left) ? parseInt(rect?.left) : 0;
-        const el_position_y = (rect?.top) ? parseInt(rect?.top + scrollTop) : 0;
-        let width = 0;
-        let height = 0;
-        if (event && event.target) {
-            const _event = event.target;
-            height = _event.offsetHeight;
-            width = _event.offsetWidth;
-        }
-        const top = `${(el_position_y - ((height / 2) + 10))}px`;
-        const left = `${el_position_x + (width / 2)}px`;
-        this.renderer.setStyle(tooltip, 'top', '0px');
-        this.renderer.setStyle(tooltip, 'left', '0px');
-        this.renderer.setStyle(tooltip, 'opacity', '0');
-        this.renderer.addClass(tooltip, 'tc-directive-tooltip');
-        this.renderer.addClass(tooltip, `tc-directive-tooltip-${direction}`);
-        const id = this.generateID();
-        this.renderer.setAttribute(tooltip, 'id', id);
-        const textNode = this.info_text;
-        if (textNode !== undefined && textNode !== null && textNode !== '') {
-            tooltip.innerHTML = textNode;
-            this.renderer.appendChild(document.body, tooltip);
-            this.start_tooltip(id, height, width, el_position_x, el_position_y, direction);
-            if (tooltip) {
-                tooltip.addEventListener('mouseenter', hoverInCallback);
-                tooltip.addEventListener('mouseleave', hoverOutCallback);
+        setTimeout(() => {
+            const scrollTop = window.scrollY || window.pageYOffset;
+            const tooltip = this.renderer.createElement('div');
+            const rect = this.el.nativeElement?.getBoundingClientRect();
+            // const direction = this.el.nativeElement?.attributes['ng-reflect--t-cdirection']?.value || 'top';
+            const direction = this._direction || 'top';
+            const el_position_x = (rect?.left) ? parseInt(rect?.left) : 0;
+            const el_position_y = (rect?.top) ? parseInt(rect?.top + scrollTop) : 0;
+            let width = 0;
+            let height = 0;
+            if (event && event.target) {
+                const _event = event.target;
+                height = _event.offsetHeight;
+                width = _event.offsetWidth;
             }
-        }
+            const top = `${(el_position_y - ((height / 2) + 10))}px`;
+            const left = `${el_position_x + (width / 2)}px`;
+            this.renderer.setStyle(tooltip, 'top', '0px');
+            this.renderer.setStyle(tooltip, 'left', '0px');
+            this.renderer.setStyle(tooltip, 'opacity', '0');
+            this.renderer.addClass(tooltip, 'tc-directive-tooltip');
+            this.renderer.addClass(tooltip, `tc-directive-tooltip-${direction}`);
+            const id = this.generateID();
+            this.renderer.setAttribute(tooltip, 'id', id);
+            const textNode = this.info_text;
+            if (textNode !== undefined && textNode !== null && textNode !== '') {
+                tooltip.innerHTML = textNode;
+                this.renderer.appendChild(document.body, tooltip);
+                this.start_tooltip(id, height, width, el_position_x, el_position_y, direction);
+                if (tooltip) {
+                    tooltip.addEventListener('mouseenter', hoverInCallback);
+                    tooltip.addEventListener('mouseleave', hoverOutCallback);
+                }
+            }
+        });
     }
     onMouseOut(event) {
         this.remove = true;