@dev-tcloud/tcloud-ui 0.1.7 → 0.1.8

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

@@ -4370,10 +4370,22 @@ class TCloudUiTooltipDirective {
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
+        this.remove = false;
         this.info_text = '';
         this._direction = 'top';
     }
     onMouseOver(event) {
+        let hoverInCallback = () => {
+            this.remove = false;
+        };
+        let hoverOutCallback = () => {
+            this.remove = true;
+            const customDiv = document.querySelector('.tc-directive-tooltip');
+            if (customDiv) {
+                customDiv.remove();
+            }
+        };
+        hoverOutCallback;
         const scrollTop = window.scrollY || window.pageYOffset;
         const tooltip = this.renderer.createElement('div');
         const rect = this.el.nativeElement?.getBoundingClientRect();
@@ -4396,20 +4408,37 @@ class TCloudUiTooltipDirective {
         this.renderer.addClass(tooltip, `tc-directive-tooltip-${direction}`);
         const id = this.generateID();
         this.renderer.setAttribute(tooltip, 'id', id);
-        const textNode = this.renderer.createText(`${this.info_text}`);
-        this.renderer.appendChild(tooltip, textNode);
-        this.renderer.appendChild(document.body, tooltip);
-        this.start_tooltip(id, height, width, el_position_x, el_position_y, direction);
+        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) {
-        const customDiv = document.querySelector('.tc-directive-tooltip');
+        this.remove = true;
+        this.remove_tooltip(document.querySelector('.tc-directive-tooltip'));
+    }
+    remove_tooltip(customDiv) {
         if (customDiv) {
-            customDiv.remove();
+            setTimeout(() => {
+                if (this.remove) {
+                    customDiv.remove();
+                }
+            }, 30);
         }
     }
     set TCtooltip(tooltip) {
         if (tooltip) {
-            this.info_text = tooltip;
+            if (typeof tooltip === 'object') {
+            }
+            else {
+                this.info_text = tooltip;
+            }
         }
     }
     set TCdirection(direction) {