fix(in-app-menu): fix in-app-menu tooltip position

th-ch · Dec 31, 2023 · 222e78c · 222e78c
1 parent 050d55c
commit 222e78c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git 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
@@ -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;
 }