From 554b3611844f355347ee99466c879fba035610cc Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Sun, 13 Oct 2024 01:59:03 +0800
Subject: [PATCH] feat(proxies): mount tooltip portal within rootElement

---
 src/App.tsx                      | 2 ++
 src/components/ProxyNodeCard.tsx | 6 +++---
 src/signals/global.ts            | 3 +++
 src/signals/index.ts             | 1 +
 4 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 src/signals/global.ts

diff --git a/src/App.tsx b/src/App.tsx
index d628998..355a2b8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import {
   favNightTheme,
   setCurTheme,
   setLatestConnectionMsg,
+  setRootElement,
   useTwemoji,
   useWsRequest,
 } from '~/signals'
@@ -33,6 +34,7 @@ export const App: ParentComponent = ({ children }) => {
 
   return (
     <div
+      ref={(el) => setRootElement(el)}
       class={twMerge(
         'relative flex h-screen flex-col overscroll-y-none subpixel-antialiased',
         useTwemoji() ? 'font-twemoji' : 'font-no-twemoji',
diff --git a/src/components/ProxyNodeCard.tsx b/src/components/ProxyNodeCard.tsx
index bac6bad..aa7cf4c 100644
--- a/src/components/ProxyNodeCard.tsx
+++ b/src/components/ProxyNodeCard.tsx
@@ -8,7 +8,7 @@ import {
   formatProxyType,
   getLatencyClassName,
 } from '~/helpers'
-import { curTheme, useProxies } from '~/signals'
+import { rootElement, useProxies } from '~/signals'
 
 export const ProxyNodeCard = (props: {
   proxyName: string
@@ -79,8 +79,8 @@ export const ProxyNodeCard = (props: {
           </div>
         </Tooltip.Trigger>
 
-        <Tooltip.Portal>
-          <Tooltip.Content data-theme={curTheme()} class="z-50 bg-transparent">
+        <Tooltip.Portal mount={rootElement()}>
+          <Tooltip.Content class="z-50">
             <Tooltip.Arrow class="text-neutral" />
 
             <div class="flex flex-col items-center gap-2 rounded-box bg-neutral p-2.5 text-neutral-content">
diff --git a/src/signals/global.ts b/src/signals/global.ts
new file mode 100644
index 0000000..242bbce
--- /dev/null
+++ b/src/signals/global.ts
@@ -0,0 +1,3 @@
+export const [rootElement, setRootElement] = createSignal(
+  document.createElement('div'),
+)
diff --git a/src/signals/index.ts b/src/signals/index.ts
index 4150be2..6fdf514 100644
--- a/src/signals/index.ts
+++ b/src/signals/index.ts
@@ -1,5 +1,6 @@
 export * from './config'
 export * from './connections'
+export * from './global'
 export * from './logs'
 export * from './proxies'
 export * from './request'