优化 职务图标显示

public/css/chat.css

@@ -452,14 +452,10 @@ a:hover {
     line-height: 1;
 }
 
-.user-badge-icon::after {
-    content: attr(data-instant-tooltip);
-    position: absolute;
-    left: calc(100% + 8px);
-    top: 50%;
+.chat-hover-tooltip {
+    position: fixed;
     z-index: 10030;
-    min-width: max-content;
-    max-width: 200px;
+    max-width: min(220px, calc(100vw - 20px));
     padding: 4px 8px;
     border: 1px solid #244d77;
     border-radius: 4px;
@@ -469,33 +465,29 @@ a:hover {
     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;
 }
 
-.user-badge-icon::before {
+.chat-hover-tooltip::after {
     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;
+.chat-hover-tooltip[data-side="right"]::after {
+    left: -4px;
+    border-left: 1px solid #244d77;
+    border-bottom: 1px solid #244d77;
+}
+
+.chat-hover-tooltip[data-side="left"]::after {
+    right: -4px;
+    border-top: 1px solid #244d77;
+    border-right: 1px solid #244d77;
 }
 
 /* 在线人数统计 */