From 61e07a1ed11013256a2a15ac3be5f016eeaa43ea Mon Sep 17 00:00:00 2001
From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com>
Date: Tue, 8 Oct 2024 17:13:44 +0800
Subject: [PATCH] Improve .protyle-scroll tooltip (#12700)

* Update tooltip.ts

* Update tooltip.ts

* Update index.ts
---
 app/src/dialog/tooltip.ts       | 13 ++++++++++++-
 app/src/protyle/scroll/index.ts |  4 ++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/src/dialog/tooltip.ts b/app/src/dialog/tooltip.ts
index 96a8b8321..5c632783e 100644
--- a/app/src/dialog/tooltip.ts
+++ b/app/src/dialog/tooltip.ts
@@ -26,16 +26,23 @@ export const showTooltip = (message: string, target: Element, error = false) =>
     } else {
         messageElement.classList.remove("tooltip--memo");
     }
+
     let left = targetRect.left;
     let top = targetRect.bottom;
     const position = target.getAttribute("data-position");
     const parentRect = target.parentElement.getBoundingClientRect();
+
     if (position?.startsWith("right")) {
         // block icon and background icon
         left = targetRect.right - messageElement.clientWidth;
+    } else if (position?.startsWith("left")) {
+        left = targetRect.left;
     }
+
     if (position?.endsWith("bottom")) {
-        top += parseInt(position.replace("right", ""));
+        top += parseInt(position.replace("right", "").replace("left", ""));
+    } else if (position?.endsWith("top")) {
+        top = targetRect.top - messageElement.clientHeight;
     } else if (position === "parentE") {
         // file tree and outline、backlink
         top = parentRect.top;
@@ -45,14 +52,18 @@ export const showTooltip = (message: string, target: Element, error = false) =>
         top = parentRect.top + 8;
         left = parentRect.left - messageElement.clientWidth;
     }
+
     const topHeight = position === "parentE" ? top : targetRect.top;
     const bottomHeight = window.innerHeight - top;
+
     messageElement.style.maxHeight = Math.max(topHeight, bottomHeight) + "px";
+    
     if (top + messageElement.clientHeight > window.innerHeight && topHeight > bottomHeight) {
         messageElement.style.top = ((position === "parentE" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
     } else {
         messageElement.style.top = top + "px";
     }
+
     if (left + messageElement.clientWidth > window.innerWidth) {
         if (position === "parentE") {
             messageElement.style.left = (parentRect.left - 8 - messageElement.clientWidth) + "px";
diff --git a/app/src/protyle/scroll/index.ts b/app/src/protyle/scroll/index.ts
index c47c6a8ff..646949bdb 100644
--- a/app/src/protyle/scroll/index.ts
+++ b/app/src/protyle/scroll/index.ts
@@ -20,13 +20,13 @@ export class Scroll {
         if (!isMobile()) {
             this.parentElement.style.right = "10px";
         }
-        this.parentElement.innerHTML = `<div class="b3-tooltips b3-tooltips__w protyle-scroll__up" aria-label="${updateHotkeyTip("⌘Home")}">
+        this.parentElement.innerHTML = `<div class="protyle-scroll__up ariaLabel" data-position="right4top" aria-label="${updateHotkeyTip("⌘Home")}">
     <svg><use xlink:href="#iconUp"></use></svg>
 </div>
 <div class="fn__none protyle-scroll__bar ariaLabel" data-position="right18bottom" aria-label="Blocks 1/1">
     <input class="b3-slider" type="range" max="1" min="1" step="1" value="1" />
 </div>
-<div class="b3-tooltips b3-tooltips__w protyle-scroll__down" aria-label="${updateHotkeyTip("⌘End")}">
+<div class="protyle-scroll__down ariaLabel" data-position="right4bottom" aria-label="${updateHotkeyTip("⌘End")}">
     <svg><use xlink:href="#iconDown"></use></svg>
 </div>`;