feat(proxies): mount tooltip portal within rootElement

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',

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">

src/signals/global.ts

@@ -0,0 +1,3 @@
+export const [rootElement, setRootElement] = createSignal(
+  document.createElement('div'),
+)

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'