communication fix

lib/ui/grid.js

@@ -200,7 +200,7 @@ class GridCheckboxColumn extends GridColumn {
 class GridIconColumn extends GridColumn {
     static create() { return createElement('span', 'col-icon') }
 
-    static setValue(element, val, item, col) {
+    static setValue(element, val, item, col, grid) {
         let className = col.className;
         if (typeof className === 'function') {
             className = className.call(col, item);
@@ -219,7 +219,7 @@ class GridIconColumn extends GridColumn {
             const icon = createIcon(type, val);
             // const layer = element.children[0];
             element.replaceChildren(icon);
-            !nullOrEmpty(col.tooltip) && setTooltip(element, col.tooltip);
+            !nullOrEmpty(col.tooltip) && setTooltip(element, col.tooltip, false, grid.element);
             element.dataset.type = type;
             element.dataset.icon = val;
         }
@@ -312,6 +312,8 @@ class Grid {
         this.#parent = container;
     }
 
+    get element() { return this.#el }
+
     get source() { return this.#source?.map(s => s.values) }
     set source(list) {
         if (this.#el == null) {

lib/ui/tooltip.d.ts

@@ -1,2 +1,2 @@
-export function setTooltip(container: HTMLElement, content: string | HTMLElement, flag?: boolean): HTMLElement
+export function setTooltip(container: HTMLElement, content: string | HTMLElement, flag?: boolean, parent?: HTMLElement): HTMLElement
 export function resolveTooltip(container?: HTMLElement): HTMLElement

lib/ui/tooltip.html

@@ -5,7 +5,7 @@
         给某个元素或者页面上含有 title 属性的元素设置一个统一样式的 tooltip。
     </p>
     <h2>setTooltip</h2>
-    <code>function setTooltip(container: HTMLElement, content: string | HTMLElement, flag?: boolean): void</code>
+    <code>function setTooltip(container: HTMLElement, content: string | HTMLElement, flag?: boolean, parent?: HTMLElement): void</code>
     <h3>container: HTMLElement</h3>
     <p>
         要设置 tooltip 的元素
@@ -18,6 +18,10 @@
     <p>
         是否启用严格模式，只有显示不完整时才显示 tooltip
     </p>
+    <h3>parent?: HTMLElement</h3>
+    <p>
+        创建在哪个元素内，默认创建在目标元素之内
+    </p>
     <h2>resolveTooltip</h2>
     <code>function resolveTooltip(container?: HTMLElement): HTMLElement</code>
     <h3>container?: HTMLElement</h3>

lib/ui/tooltip.js

@@ -1,14 +1,22 @@
 import { createElement } from "../functions";
+// import { global } from "../utility";
 
-function setTooltip(container, content, flag = false) {
-    const tip = container.querySelector('.tooltip-wrapper');
-    if (tip != null) {
-        tip.remove();
+function setTooltip(container, content, flag = false, parent = null) {
+    const isParent = parent instanceof HTMLElement;
+    if (isParent) {
+        const tipid = container.dataset.tipId;
+        const tip = parent.querySelector(`.tooltip-wrapper[data-tip-id="${tipid}"]`);
+        tip?.remove();
+    } else {
+        const tip = container.querySelector('.tooltip-wrapper');
+        tip?.remove();
     }
     const wrapper = createElement('div', wrapper => {
         wrapper.className = 'tooltip-wrapper tooltip-color';
         wrapper.style.visibility = 'hidden';
         wrapper.style.opacity = 0;
+        wrapper.style.top = '0';
+        wrapper.style.left = '0';
     },
         createElement('div', 'tooltip-pointer tooltip-color'),
         createElement('div', 'tooltip-curtain tooltip-color'),
@@ -22,7 +30,14 @@ function setTooltip(container, content, flag = false) {
         })
     );
     // container.insertAdjacentElement('afterend', wrapper);
-    container.appendChild(wrapper);
+    if (isParent) {
+        const tipId = String(Math.random()).substring(2);
+        container.dataset.tipId = tipId;
+        wrapper.dataset.tipId = tipId;
+        parent.appendChild(wrapper);
+    } else {
+        container.appendChild(wrapper);
+    }
 
     let tid;
     container.addEventListener('mouseenter', () => {
@@ -36,19 +51,27 @@ function setTooltip(container, content, flag = false) {
         }
         if (!flag || c.scrollWidth > c.offsetWidth) {
             tid = setTimeout(() => {
-                let parent = c;
-                let left = c.offsetLeft;
-                let top = c.offsetTop;
-                while ((parent = parent.offsetParent) != null) {
-                    left += parent.offsetLeft;
-                    top += parent.offsetTop;
+                let p;
+                let left;
+                let top;
+                left = c.offsetLeft;
+                top = c.offsetTop;
+                if (isParent) {
+                    p = c.offsetParent;
+                    while (p != null && p !== parent) {
+                        left += p.offsetLeft;
+                        top += p.offsetTop;
+                        p = p.offsetParent;
+                    }
                 }
-                parent = c;
-                while ((parent = parent.parentElement) != null) {
-                    left -= parent.scrollLeft;
-                    top -= parent.scrollTop;
+                p = c.parentElement;
+                const offsetParent = c.offsetParent;
+                while (p != null && p !== (isParent ? parent : offsetParent)) {
+                    left -= p.scrollLeft;
+                    top -= p.scrollTop;
+                    p = p.parentElement;
                 }
-                left -= wrapper.offsetWidth / 2 - c.offsetWidth / 2;
+                left += (c.offsetWidth - wrapper.offsetWidth) / 2;
                 top -= wrapper.offsetHeight + 14;
                 wrapper.style.left = `${left}px`;
                 wrapper.style.top = `${top}px`;