优化 职务图标文字提示

public/css/chat.css

@@ -452,21 +452,50 @@ a:hover {
     line-height: 1;
 }
 
-.chat-hover-tooltip {
-    position: fixed;
+.user-badge-icon::after {
+    content: attr(data-instant-tooltip);
+    position: absolute;
+    left: calc(100% + 8px);
+    top: 50%;
     z-index: 10030;
-    max-width: min(220px, calc(100vw - 16px));
-    padding: 5px 8px;
+    min-width: max-content;
+    max-width: 200px;
+    padding: 4px 8px;
     border: 1px solid #244d77;
     border-radius: 4px;
     background: linear-gradient(to bottom, #fffef2, #fff6c9);
     color: #243b53;
     font-size: 11px;
-    line-height: 1.4;
+    line-height: 1.35;
+    white-space: nowrap;
     box-shadow: 0 6px 18px rgba(17, 34, 51, 0.24);
+    transform: translateY(-50%);
+    opacity: 0;
+    visibility: hidden;
     pointer-events: none;
-    white-space: normal;
-    word-break: break-word;
+}
+
+.user-badge-icon::before {
+    content: '';
+    position: absolute;
+    left: calc(100% + 4px);
+    top: 50%;
+    z-index: 10031;
+    width: 6px;
+    height: 6px;
+    border-left: 1px solid #244d77;
+    border-bottom: 1px solid #244d77;
+    background: #fff9d8;
+    transform: translateY(-50%) rotate(45deg);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.user-badge-icon:hover::after,
+.user-badge-icon:hover::before {
+    opacity: 1;
+    visibility: visible;
 }
 
 /* 在线人数统计 */

resources/views/chat/partials/layout/right-panel.blade.php

@@ -72,6 +72,3 @@
         在线: <strong id="online-count-footer">0</strong> 人
     </div>
 </div>
-
-{{-- 右侧名单即时提示层：替代浏览器原生 title 的延迟提示 --}}
-<div id="chat-hover-tooltip" class="chat-hover-tooltip" style="display:none;"></div>

resources/views/chat/partials/scripts.blade.php

@@ -40,8 +40,6 @@
     const BLOCKED_SYSTEM_SENDERS_STORAGE_KEY = 'chat_blocked_system_senders';
     const CHAT_SOUND_MUTED_STORAGE_KEY = 'chat_sound_muted';
     const BLOCKABLE_SYSTEM_SENDERS = ['钓鱼播报', '星海小博士', '百家乐', '跑马', '神秘箱子'];
-    const hoverTooltip = document.getElementById('chat-hover-tooltip');
-    let activeTooltipTrigger = null;
 
     // ── 消息区：手机端双触发打开用户名片（PC 端靠 ondblclick 内联属性）──
     // span[data-u] 由 clickableUser() 生成，touchend 委托至容器避免每条消息单独绑定
@@ -835,94 +833,6 @@
         }
     }
 
-    /**
-     * 根据鼠标位置摆放即时提示层，避免超出浏览器可视区域。
-     *
-     * @param {MouseEvent} event 鼠标事件对象
-     */
-    function positionHoverTooltip(event) {
-        if (!hoverTooltip) {
-            return;
-        }
-
-        const offset = 14;
-        const tooltipWidth = hoverTooltip.offsetWidth;
-        const tooltipHeight = hoverTooltip.offsetHeight;
-        const maxLeft = window.innerWidth - tooltipWidth - 8;
-        const maxTop = window.innerHeight - tooltipHeight - 8;
-        const nextLeft = Math.min(event.clientX + offset, Math.max(8, maxLeft));
-        const nextTop = Math.min(event.clientY + offset, Math.max(8, maxTop));
-
-        hoverTooltip.style.left = `${nextLeft}px`;
-        hoverTooltip.style.top = `${nextTop}px`;
-    }
-
-    /**
-     * 立即显示右侧名单图标提示，替代浏览器原生 title 的延迟行为。
-     *
-     * @param {HTMLElement|null} trigger 触发提示的图标元素
-     * @param {MouseEvent}       event   鼠标事件对象
-     */
-    function showHoverTooltip(trigger, event) {
-        if (!hoverTooltip || !trigger) {
-            return;
-        }
-
-        const tooltipText = trigger.dataset.instantTooltip || '';
-        if (!tooltipText) {
-            return;
-        }
-
-        activeTooltipTrigger = trigger;
-        hoverTooltip.textContent = tooltipText;
-        hoverTooltip.style.display = 'block';
-        positionHoverTooltip(event);
-    }
-
-    /**
-     * 隐藏右侧名单的即时提示层。
-     */
-    function hideHoverTooltip() {
-        if (!hoverTooltip) {
-            return;
-        }
-
-        activeTooltipTrigger = null;
-        hoverTooltip.style.display = 'none';
-        hoverTooltip.textContent = '';
-    }
-
-    // 通过事件委托托管动态生成的名单徽章，确保鼠标移入后立刻显示提示。
-    document.addEventListener('mouseover', (event) => {
-        const trigger = event.target.closest('[data-instant-tooltip]');
-        if (!trigger) {
-            return;
-        }
-
-        showHoverTooltip(trigger, event);
-    });
-
-    document.addEventListener('mousemove', (event) => {
-        if (!activeTooltipTrigger) {
-            return;
-        }
-
-        positionHoverTooltip(event);
-    });
-
-    document.addEventListener('mouseout', (event) => {
-        const trigger = event.target.closest('[data-instant-tooltip]');
-        if (!trigger || trigger !== activeTooltipTrigger) {
-            return;
-        }
-
-        if (event.relatedTarget && trigger.contains(event.relatedTarget)) {
-            return;
-        }
-
-        hideHoverTooltip();
-    });
-
     // ── 渲染在线人员列表（支持排序） ──────────────────
     /**
      * 核心渲染函数：将在线用户渲染到指定容器（桌面端名单区和手机端抽屉共用）