瀏覽代碼

:art: Improve tooltip

- 优化元素更新
- 改变 hideTooltip() 的方式为添加类名 .fn__none
- 增加 .tooltip--tab_header
Jeffrey Chen 6 月之前
父節點
當前提交
d036d822e6
共有 3 個文件被更改,包括 9 次插入9 次删除
  1. 3 1
      app/src/block/popover.ts
  2. 4 7
      app/src/dialog/tooltip.ts
  3. 2 1
      app/src/layout/Tab.ts

+ 3 - 1
app/src/block/popover.ts

@@ -28,7 +28,9 @@ export const initBlockPopover = (app: App) => {
         if (aElement) {
             let tooltipClass = "";
             let tip = aElement.getAttribute("aria-label");
-            if (aElement.classList.contains("av__cell")) {
+            if (aElement.getAttribute("data-type") === "tab-header") {
+                tooltipClass = "tab_header";
+            } else if (aElement.classList.contains("av__cell")) {
                 if (aElement.classList.contains("av__cell--header")) {
                     const textElement = aElement.querySelector(".av__celltext");
                     const desc = aElement.getAttribute("data-desc");

+ 4 - 7
app/src/dialog/tooltip.ts

@@ -19,12 +19,13 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
     } else {
         if (messageElement.className !== className) {
             messageElement.className = className;
+            // 避免原本的 top 和 left 影响计算
+            messageElement.removeAttribute("style");
         }
         if (messageElement.innerHTML !== message) {
             messageElement.innerHTML = message;
+            messageElement.removeAttribute("style");
         }
-        // 避免原本的 top 和 left 影响计算
-        messageElement.removeAttribute("style");
     }
 
     let left = targetRect.left;
@@ -60,10 +61,6 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
 
     messageElement.style.maxHeight = Math.max(topHeight, bottomHeight) + "px";
 
-    // 避免原本的 top 和 left 影响计算
-    messageElement.style.top = "0px";
-    messageElement.style.left = "0px";
-
     if (top + messageElement.clientHeight > window.innerHeight && topHeight > bottomHeight) {
         messageElement.style.top = ((position === "parentE" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
     } else {
@@ -84,6 +81,6 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
 export const hideTooltip = () => {
     const messageElement = document.getElementById("tooltip");
     if (messageElement) {
-        messageElement.remove();
+        messageElement.classList.add("fn__none");
     }
 };

+ 2 - 1
app/src/layout/Tab.ts

@@ -62,7 +62,8 @@ export class Tab {
                         id
                     }, (response) => {
                         if (!this.headElement.getAttribute("aria-label")) {
-                            showTooltip(escapeGreat(response.data), this.headElement);
+                            const tooltipClass = "tab_header";
+                            showTooltip(escapeGreat(response.data), this.headElement, tooltipClass);
                         }
                         this.headElement.setAttribute("aria-label", escapeGreat(response.data));
                     });