From 222e78c85b06251d2469fa8104c5aeb65ee145c9 Mon Sep 17 00:00:00 2001
From: Su-Yong <simssy2205@gmail.com>
Date: Sun, 31 Dec 2023 23:48:01 +0900
Subject: [PATCH] fix(in-app-menu): fix `in-app-menu` tooltip position

---
 src/plugins/in-app-menu/menu/panel.ts | 13 ++++++++++++-
 src/plugins/in-app-menu/titlebar.css  | 10 +++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/plugins/in-app-menu/menu/panel.ts b/src/plugins/in-app-menu/menu/panel.ts
index b69261e3..4c2a9581 100644
--- a/src/plugins/in-app-menu/menu/panel.ts
+++ b/src/plugins/in-app-menu/menu/panel.ts
@@ -61,7 +61,18 @@ export const createPanel = (
     if (item.toolTip) {
       const menuTooltip = document.createElement('menu-item-tooltip');
       menuTooltip.append(item.toolTip);
-      menu.append(menuTooltip);
+
+      menu.addEventListener('mouseenter', () => {
+        const rect = menu.getBoundingClientRect();
+        menuTooltip.style.setProperty('max-width', `${rect.width - 8}px`);
+        menuTooltip.style.setProperty('--x', `${rect.left}px`);
+        menuTooltip.style.setProperty('--y', `${rect.top + rect.height}px`);
+        menuTooltip.classList.add('show');
+      });
+      menu.addEventListener('mouseleave', () => {
+        menuTooltip.classList.remove('show');
+      });
+      parent.append(menuTooltip);
     }
 
     menu.addEventListener('click', async () => {
diff --git a/src/plugins/in-app-menu/titlebar.css b/src/plugins/in-app-menu/titlebar.css
index 24e548ab..9f2417ed 100644
--- a/src/plugins/in-app-menu/titlebar.css
+++ b/src/plugins/in-app-menu/titlebar.css
@@ -152,10 +152,10 @@ menu-item-badge {
 }
 
 menu-item-tooltip {
-  position: absolute;
+  position: fixed;
 
-  left: 0;
-  top: calc(100% + 4px);
+  left: var(--x, 0);
+  top: var(--y, 0);
 
   display: flex;
   justify-content: center;
@@ -176,9 +176,9 @@ menu-item-tooltip {
   scale: 0.9;
 
   transform-origin: 50% 0;
-  transition: all 0.225s ease-out;
+  transition: opacity 0.225s ease-out, scale 0.225s ease-out;
 }
-menu-item:hover > menu-item-tooltip {
+menu-item-tooltip.show {
   opacity: 1;
   scale: 1.0;
 }