1

components/cwg-page-wrapper.vue

@@ -42,7 +42,7 @@
           </cwg-match-media>
         </view>
       </view>
-      <view class="chat-icon" :class="{ 'chat-icon-expanded': isChatIconExpanded, 'chat-icon-hidden': type == 'chat' }"
+      <view class="chat-icon cursor-pointer" :data-tooltip="t('Downloadpage.item16')" :class="{ 'chat-icon-expanded': isChatIconExpanded, 'chat-icon-hidden': type == 'chat' }"
         @click="handleChatIconClick">
         <cwg-icon name="chat" color="#fff" />
       </view>

pages/analytics/analystViews.vue

@@ -14,7 +14,7 @@
                     <view class="card-header">
                         <view class="nav nav-underline card-header-tabs" id="myTab" role="tablist">
                             <view class="nav-item" v-for="item in tabsConfig" :key="item">
-                                <view class="nav-link cursor-pointer" :data-tooltip="item.text" data-placement="top" @click="activeTab = item.value"
+                                <view class="nav-link cursor-pointer" @click="activeTab = item.value"
                                     :class="{ 'active': item.value == activeTab }">{{
                                         item.text }}</view>
                             </view>

pages/analytics/components/List.vue

@@ -28,7 +28,7 @@
     <!-- 列表 -->
     <view v-if="list.length > 0" class="list">
       <view v-for="item in list" :key="item.id" class="col-12 m-b30">
-        <view class="card card-action action-elevate action-border-primary cursor-pointer" @click="handleItemClick(item)" :data-tooltip="t('vu.tooltip.t4',{pageName:currentTitleText})" data-placement="top">
+        <view class="card card-action action-elevate action-border-primary cursor-pointer" @click="handleItemClick(item)">
           <view class="row g-0">
             <view class="col-md-3" v-if="item.coverImage">
               <view class="card-header border-0 p-0 m-2 position-relative overflow-hidden">

pages/analytics/news.vue

@@ -37,7 +37,7 @@
                     <view class="card-header">
                         <view class="nav nav-underline card-header-tabs" id="myTab" role="tablist">
                             <view class="nav-item" v-for="item in tabsConfig" :key="item">
-                                <view class="nav-link cursor-pointer" :data-tooltip="item.text" data-placement="top" @click="activeTab = item.value"
+                                <view class="nav-link cursor-pointer" @click="activeTab = item.value"
                                     :class="{ 'active': item.value == activeTab }">{{
                                         item.text }}</view>
                             </view>

pages/customer/components/AccountList.vue

@@ -6,8 +6,7 @@
                 <view class="border-0 card-header">
                     <view class="d-flex flex-wrap gap-3 align-items-center justify-content-between mb-3">
                         <h3 class="mb-0" style="align-self: flex-start" v-t="'Custom.Index.AccountList'"></h3>
-                        <view type="button" class="btn btn-danger btn-shadow waves-effect cursor-pointer" :data-tooltip="t('Custom.Index.AddAccount')"
-                            @click="createAccount">
+                        <view type="button" class="btn btn-danger btn-shadow waves-effect cursor-pointer" @click="createAccount">
                             <view class="d-flex align-items-center">
                                 <cwg-icon name="crm-plus" :size="14" color="#fff" />
                                 <text v-t="'Custom.Index.AddAccount'" />
@@ -21,7 +20,7 @@
                     <view class="card">
                         <view class="card-header">
                             <view class="nav nav-underline card-header-tabs">
-                                <view class="nav-item cwg-cursor cursor-pointer" :data-tooltip="tab.text" v-for="(tab, index) in tabs" :key="index"
+                                <view class="nav-item cwg-cursor cursor-pointer" v-for="(tab, index) in tabs" :key="index"
                                     @click="handleTabClick(tab.value)">
                                     <view class="nav-link" :class="{ 'active': tab.value === cativeIndex }">{{ tab.text
                                     }}

pages/customer/components/PaymentMethodsList.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="row">
-    <view class="col-lg-3 col-sm-12 cursor-pointer mb-2" v-for="item in list" :key="item.id" :class="{ disabled: item.disabled }" @click="handleClick(item)" :data-tooltip="t('vu.tooltip.t9')" data-placement="top">
+    <view class="col-lg-3 col-sm-12 cursor-pointer mb-2" v-for="item in list" :key="item.id" :class="{ disabled: item.disabled }" @click="handleClick(item)">
       <view class="card hover">
         <view class="card-header d-flex justify-content-between align-items-center">
           <h4 class="card-title mb-0">{{ item.name }}</h4>

pages/login/index.vue

@@ -259,7 +259,7 @@
         </uni-col>
       </uni-row>
     </view>
-    <view class="chat-icon" :class="{ 'chat-icon-expanded': isChatIconExpanded, 'chat-icon-hidden': type == 'chat' }"
+    <view class="chat-icon cursor-pointer" :data-tooltip="t('Downloadpage.item16')" :class="{ 'chat-icon-expanded': isChatIconExpanded, 'chat-icon-hidden': type == 'chat' }"
       @click="handleChatIconClick">
       <cwg-icon name="chat" color="#fff" />
     </view>

pages/login/regist.vue

@@ -193,7 +193,7 @@
         </uni-col>
       </uni-row>
     </view>
-    <view class="chat-icon" :class="{ 'chat-icon-expanded': isChatIconExpanded, 'chat-icon-hidden': type == 'chat' }"
+    <view class="chat-icon cursor-pointer" :data-tooltip="t('Downloadpage.item16')" :class="{ 'chat-icon-expanded': isChatIconExpanded, 'chat-icon-hidden': type == 'chat' }"
       @click="handleChatIconClick">
       <cwg-icon name="chat" color="#fff" />
     </view>

utils/useMouseTooltip.js

@@ -2,6 +2,8 @@
 
 let tooltipEl = null
 let currentTarget = null
+let observer = null
+
 let isInitialized = false
 
 let moveHandler = null
@@ -27,6 +29,7 @@ export function useMouseTooltip() {
         if (tooltipEl) return
 
         tooltipEl = document.createElement('div')
+
         tooltipEl.className = 'cursor-pointer-tooltip'
 
         tooltipEl.style.cssText = `
@@ -110,8 +113,44 @@ export function useMouseTooltip() {
         tooltipEl.style.top = `${y}px`
     }
 
+    function disconnectObserver() {
+        if (observer) {
+            observer.disconnect()
+            observer = null
+        }
+    }
+
+    function watchTooltip(target) {
+        disconnectObserver()
+
+        observer = new MutationObserver(() => {
+            if (
+                !tooltipEl ||
+                currentTarget !== target
+            ) {
+                return
+            }
+
+            const text =
+                target.dataset.tooltip || ''
+
+            tooltipEl.textContent = text
+
+            updatePosition(
+                lastMouseX,
+                lastMouseY
+            )
+        })
+
+        observer.observe(target, {
+            attributes: true,
+            attributeFilter: ['data-tooltip']
+        })
+    }
+
     function showTooltip(e, target) {
-        const text = target.dataset.tooltip
+        const text =
+            target.dataset.tooltip || ''
 
         if (!text) return
 
@@ -129,11 +168,16 @@ export function useMouseTooltip() {
 
         currentTarget = target
 
+        lastMouseX = e.clientX
+        lastMouseY = e.clientY
+
         tooltipEl.textContent = text
 
+        watchTooltip(target)
+
         updatePosition(
-            e.clientX,
-            e.clientY
+            lastMouseX,
+            lastMouseY
         )
 
         tooltipEl.style.opacity = '0'
@@ -141,13 +185,17 @@ export function useMouseTooltip() {
         tooltipEl.style.transform = 'scale(.85)'
 
         showTimer = setTimeout(() => {
-            if (currentTarget !== target) return
+            if (currentTarget !== target) {
+                return
+            }
 
-            tooltipEl.style.visibility = 'visible'
+            tooltipEl.style.visibility =
+                'visible'
 
             requestAnimationFrame(() => {
                 tooltipEl.style.opacity = '1'
-                tooltipEl.style.transform = 'scale(1)'
+                tooltipEl.style.transform =
+                    'scale(1)'
             })
         }, SHOW_DELAY)
     }
@@ -155,6 +203,8 @@ export function useMouseTooltip() {
     function hideTooltip() {
         if (!tooltipEl) return
 
+        disconnectObserver()
+
         if (showTimer) {
             clearTimeout(showTimer)
             showTimer = null
@@ -166,12 +216,19 @@ export function useMouseTooltip() {
 
         hideTimer = setTimeout(() => {
             tooltipEl.style.opacity = '0'
-            tooltipEl.style.transform = 'scale(.85)'
+            tooltipEl.style.transform =
+                'scale(.85)'
 
             setTimeout(() => {
-                if (!tooltipEl) return
-
-                tooltipEl.style.visibility = 'hidden'
+                if (
+                    !tooltipEl ||
+                    currentTarget
+                ) {
+                    return
+                }
+
+                tooltipEl.style.visibility =
+                    'hidden'
             }, 180)
 
             currentTarget = null
@@ -184,44 +241,66 @@ export function useMouseTooltip() {
         isInitialized = true
 
         moveHandler = (e) => {
-            if (!currentTarget) return
+            if (
+                !currentTarget ||
+                !tooltipEl
+            ) {
+                return
+            }
 
             lastMouseX = e.clientX
             lastMouseY = e.clientY
 
             if (rafId) return
 
-            rafId = requestAnimationFrame(() => {
-                rafId = null
+            rafId =
+                requestAnimationFrame(() => {
+                    rafId = null
 
-                updatePosition(
-                    lastMouseX,
-                    lastMouseY
-                )
-            })
+                    updatePosition(
+                        lastMouseX,
+                        lastMouseY
+                    )
+                })
         }
 
         overHandler = (e) => {
-            const target = e.target.closest('.cursor-pointer')
+            const target =
+                e.target.closest(
+                    '.cursor-pointer'
+                )
 
             if (!target) return
 
-            if (target === currentTarget) return
+            if (
+                target === currentTarget
+            ) {
+                return
+            }
 
             showTooltip(e, target)
         }
 
         outHandler = (e) => {
-            const target = e.target.closest('.cursor-pointer')
+            const target =
+                e.target.closest(
+                    '.cursor-pointer'
+                )
 
             if (!target) return
 
-            if (target !== currentTarget) return
+            if (
+                target !== currentTarget
+            ) {
+                return
+            }
 
-            // 在当前元素内部移动
+            // 子元素内部移动
             if (
                 e.relatedTarget &&
-                target.contains(e.relatedTarget)
+                target.contains(
+                    e.relatedTarget
+                )
             ) {
                 return
             }
@@ -249,6 +328,8 @@ export function useMouseTooltip() {
     }
 
     function cleanup() {
+        disconnectObserver()
+
         if (rafId) {
             cancelAnimationFrame(rafId)
             rafId = null
@@ -273,6 +354,7 @@ export function useMouseTooltip() {
                 true
             )
         }
+
         if (overHandler) {
             document.removeEventListener(
                 'mouseover',
@@ -280,6 +362,7 @@ export function useMouseTooltip() {
                 true
             )
         }
+
         if (outHandler) {
             document.removeEventListener(
                 'mouseout',
@@ -287,12 +370,15 @@ export function useMouseTooltip() {
                 true
             )
         }
+
         moveHandler = null
         overHandler = null
         outHandler = null
 
         isInitialized = false
     }
+
     init()
+
     return cleanup
 }