help tips 标准化

Html/apps/static/js/chatbox.js

@@ -466,9 +466,6 @@ function generateProgressBar(N, idx, titles) {
     const progressBox = document.createElement('div');
     progressBox.className = 'progress-box';
 
-    // 获取详细信息容器
-    const detailBox = document.getElementById('progress-detail');
-
     // 根据N值生成子框并设置颜色
     for (let i = 0; i < N; i++) {
         const titleBox = document.createElement('div');
@@ -486,31 +483,14 @@ function generateProgressBar(N, idx, titles) {
         // 移除进度条上的文字，因为现在进度条很细
         titleBox.innerHTML = '';
 
-        // 监听鼠标移入事件来显示详情
-        titleBox.addEventListener('mouseenter', function () {
-            detailBox.innerHTML = `Step ${i + 1}: ${titles[i] || "No title"}`;
-            detailBox.style.display = 'block';
-            // 根据进度条位置显示详情
-            const rect = titleBox.getBoundingClientRect();
-            detailBox.style.top = `${rect.top + window.scrollY - 10}px`;  // 调整位置到进度条上方
-            detailBox.style.left = `${rect.left + window.scrollX + rect.width / 2 - detailBox.offsetWidth / 2}px`;
-            // 确保详情框不会超出视口
-            if (detailBox.getBoundingClientRect().left < 0) {
-                detailBox.style.left = '10px';
-            }
-            if (detailBox.getBoundingClientRect().right > window.innerWidth) {
-                detailBox.style.left = `${window.innerWidth - detailBox.offsetWidth - 10}px`;
-            }
-        });
-
-        // 监听鼠标移出事件来隐藏详情
-        titleBox.addEventListener('mouseleave', function () {
-            detailBox.style.display = 'none';
-        });
+        // 使用attachImmediateTooltip函数，使提示框跟随鼠标移动
+        const tooltipText = `Step ${i + 1}: ${titles[i] || "No title"}`;
+        attachImmediateTooltip(titleBox, tooltipText);
 
         progressBox.appendChild(titleBox);
     }
 
     // 将生成的进度条添加到容器中
     container.appendChild(progressBox);
+
 }