1

App.vue

@@ -2,7 +2,7 @@
   import { ref, onMounted, nextTick, watch, onUnmounted, getCurrentInstance } from 'vue'
   import { useI18n } from 'vue-i18n'
   import config from '@/config'
-
+  import { useMouseTooltip } from '@/utils/useMouseTooltip'
   const { t, locale } = useI18n()
   const { Host80 } = config
 
@@ -413,11 +413,14 @@
         window.vm = instance.proxy
       }
     }
+    // 初始化鼠标跟随提示
+    window._destroyTooltip = useMouseTooltip()
     window.addEventListener('hashchange', handleSignupRoute)
     // #endif
   })
   onUnmounted(() => {
     // #ifdef H5
+    if (window._destroyTooltip) window._destroyTooltip()
     window.removeEventListener('hashchange', handleSignupRoute)
     // #endif
   })

static/scss/global/global.scss

@@ -2118,47 +2118,32 @@ uni-content.collapsed {
   position: relative;
   cursor: pointer;
 }
+
 @media screen and (min-width: 768px) {
   .cursor-pointer[data-tooltip]::after {
     content: attr(data-tooltip);
-    position: absolute;
+    position: fixed;
     background-color: rgba(var(--bs-body-bg-rgb), 1) !important;
-    border-radius: 8px;
+    border-radius: px2rpx(8);
     color: var(--bs-emphasis-color);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    font-size: 12px;
+    font-size: px2rpx(13);
     text-align: left;
-    line-height: 20px;
-    padding: 12px;
+    line-height: px2rpx(20);
+    padding: px2rpx(6);
     white-space: nowrap;
     z-index: 999;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.2s ease;
     pointer-events: none;
+    left: 0;
+    top: 0;
   }
   .cursor-pointer[data-tooltip]:hover::after {
     opacity: 1;
     visibility: visible;
-  }
-  .cursor-pointer[data-tooltip][data-placement="top"]::after {
-    left: 50%;
-    bottom: 100%;
-    transform: translate(-50%, -8px);
-  }
-  .cursor-pointer[data-tooltip][data-placement="bottom"]::after {
-    left: 50%;
-    top: 100%;
-    transform: translate(-50%, 8px);
-  }
-  .cursor-pointer[data-tooltip][data-placement="left"]::after {
-    right: 100%;
-    top: 50%;
-    transform: translate(-8px, -50%);
-  }
-  .cursor-pointer[data-tooltip][data-placement="right"]::after {
-    left: 100%;
-    top: 50%;
-    transform: translate(8px, -50%);
+    left: calc(var(--mouse-x) + 15px);
+    top: calc(var(--mouse-y) + 15px);
   }
 }

utils/useMouseTooltip.js

@@ -0,0 +1,42 @@
+let t = null
+let r = null
+let l = null
+export function useMouseTooltip() {
+    const u = (e) => {
+        document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')
+        document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px')
+        clearTimeout(t)
+        t = setTimeout(() => {
+            document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')
+            document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px')
+        }, 200)
+    }
+    const clearMousePosition = () => {
+        clearTimeout(t)
+        document.documentElement.style.removeProperty('--mouse-x')
+        document.documentElement.style.removeProperty('--mouse-y')
+    }
+    const i = () => {
+        r = (e) => {
+            if (e.target.closest('.cursor-pointer')) {
+                u(e)
+            }
+        }
+        l = (e) => {
+            if (e.target.closest('.cursor-pointer')) {
+                clearMousePosition()
+            }
+        }
+        document.addEventListener('mouseenter', r, true)
+        document.addEventListener('mouseleave', l, true)
+    }
+    const d = () => {
+        clearTimeout(t)
+        if (r) document.removeEventListener('mouseenter', r, true)
+        if (l) document.removeEventListener('mouseleave', l, true)
+        r = null
+        l = null
+    }
+    i()
+    return d
+}