fix: bind hover tooltip as body-level element opening rightward above split overlay (fixes scope bug + left-cover)

01_content/src/client/index.tsx

@@ -344,6 +344,30 @@ async function fetchSessionGroups(): Promise<{ groups: { title: string; sessions
   } catch { return { groups: [], current: '' } }
 }
 
+/** hover 气泡：挂在 document.body 的独立元素（不受侧栏堆叠上下文限制，可向右伸出显示） */
+let bindTipEl: HTMLDivElement | null = null
+function showBindTip(btn: HTMLElement) {
+  const tip = btn.getAttribute('data-tip')
+  if (!tip) return
+  if (!bindTipEl) {
+    bindTipEl = document.createElement('div')
+    bindTipEl.className = 'dsh-wt_bindTip'
+    document.body.appendChild(bindTipEl)
+  }
+  bindTipEl.textContent = tip
+  const r = btn.getBoundingClientRect()
+  bindTipEl.style.left = (r.right + 8) + 'px'
+  bindTipEl.style.top = (r.top + r.height / 2) + 'px'
+  bindTipEl.style.display = 'block'
+  // 右侧放不下时翻到左侧（一般不会：侧栏 ~288px + 气泡 ~200px 远小于视口宽）
+  const tw = bindTipEl.offsetWidth
+  const x = r.right + 8 + tw > window.innerWidth - 8 ? Math.max(8, r.left - 8 - tw) : r.right + 8
+  bindTipEl.style.left = x + 'px'
+}
+function hideBindTip() {
+  if (bindTipEl) bindTipEl.style.display = 'none'
+}
+
 /** 把文本送入指定会话：宿主同款寻址（binding(id).session.prompt / sendSession(会话面)），
  *  插件是根级上下文，无作用域的 conversation.send 会报 requires a session scope，不可用。 */
 async function promptIntoSession(sessionId: string, text: string): Promise<void> {
@@ -1747,6 +1771,31 @@ export function apply(ctx: any) {
     return () => { style.remove() }
   }, 'dsh-worktable: styles')
 
+  // 绑定按钮 hover 气泡：事件委托 + body 级气泡（跨层显示，不遮挡右侧对话也不盖项目名）
+  ctx.effect(() => {
+    const over = (e: MouseEvent) => {
+      const t = e.target as HTMLElement | null
+      const btn = t && t.closest ? (t.closest('.dsh-wt_bindBtn') as HTMLElement | null) : null
+      if (btn) showBindTip(btn)
+    }
+    const out = (e: MouseEvent) => {
+      const t = e.target as HTMLElement | null
+      if (t && t.closest && t.closest('.dsh-wt_bindBtn')) hideBindTip()
+    }
+    const hide = () => hideBindTip()
+    document.addEventListener('mouseover', over, true)
+    document.addEventListener('mouseout', out, true)
+    document.addEventListener('scroll', hide, true)
+    document.addEventListener('click', hide, true)
+    return () => {
+      document.removeEventListener('mouseover', over, true)
+      document.removeEventListener('mouseout', out, true)
+      document.removeEventListener('scroll', hide, true)
+      document.removeEventListener('click', hide, true)
+      if (bindTipEl) { bindTipEl.remove(); bindTipEl = null }
+    }
+  }, 'dsh-worktable: bind tip')
+
   // locale 词典（宿主 locale 服务缺席时由 t 的回退分支兜底）
   ctx.effect(() => {
     if (ctx.locale?.register) return ctx.locale.register(NS, { zh, en })

01_content/src/client/styles.ts

@@ -159,8 +159,8 @@ export const css = [
   '.dsh-wt_bindBtn{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:22px;height:22px;margin:0;display:block;border-radius:6px;color:var(--dsw-alias-label-secondary,#9aa4b2);cursor:pointer;user-select:none}',
   '.dsh-wt_bindBtn:hover{background:var(--dsw-alias-fill-l2,rgba(255,255,255,.09));color:var(--dsw-alias-label-primary,#e6e8eb)}',
   '.dsh-wt_bindBtn[data-bound=true]{color:var(--dsw-alias-label-primary,#e6e8eb)}',
-  '.dsh-wt_bindBtn::after{content:attr(data-tip);position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(4px);padding:5px 9px;border:1px solid var(--dsw-alias-border-l2,#3a4150);border-radius:6px;background:var(--dsw-alias-fill-l2,#171b22);color:var(--dsw-alias-label-primary,#e6e8eb);font-size:11px;line-height:15px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease, transform .12s ease;box-shadow:0 4px 12px rgba(0,0,0,.35)}',
-  '.dsh-wt_bindBtn:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}',
+  // 气泡为 body 级独立元素（.dsh-wt_bindTip），此处只保留按钮本体样式
+  '.dsh-wt_bindTip{position:fixed;transform:translateY(-50%);padding:5px 9px;border:1px solid var(--dsw-alias-border-l2,#3a4150);border-radius:6px;background:var(--dsw-alias-fill-l2,#171b22);color:var(--dsw-alias-label-primary,#e6e8eb);font-size:11px;line-height:15px;white-space:nowrap;pointer-events:none;z-index:1200;box-shadow:0 4px 12px rgba(0,0,0,.35);display:none}',
   '.dsh-wt_bindCircles{position:absolute;left:50%;top:50%;width:14px;height:7px;transform:translate(-50%,-50%)}',
   '.dsh-wt_bindCircles::before,.dsh-wt_bindCircles::after{content:\'\';position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;box-sizing:border-box;border:1.2px solid currentColor;background:transparent}',
   '.dsh-wt_bindCircles::before{left:0}',

02_process/worklogs/2026-08-16_worktable-v2.md

@@ -780,6 +780,20 @@
   全 20 STEP ERROR_COUNT: 0（STEP9 presetCount 9）。
 - 备注：纯客户端改动，F5 即生效；动画生成窗（iframe 壳）按用户指示未实现，仅给方案。
 
+## 补记（绑定气泡最终方案：body 级气泡向右伸出）
+
+- 用户反馈：向左弹出盖住项目名；要向右伸（参照「添加项目」原生 title 气泡——溢出侧栏也显示正常）。
+- 根因（两处）：① 此前 CSS ::after 气泡画在侧栏层叠上下文内，向右必被右侧对话浮层压住；
+  ② 首次尝试的 body 级气泡函数被误插进 WorktableSection 组件内部，apply 的 effect 引用
+  模块级同名函数 → 运行时 ReferenceError，hover 无任何反应（esbuild 改名 showBindTip2 暴露）。
+- 方案：事件委托（mouseover/mouseout/scroll/click，捕获阶段）→ body 级 .dsh-wt_bindTip 独立元素，
+  z-index 1200（> 分栏浮层 68），定位在按钮右侧 8px、垂直居中，右侧放不下才翻左。
+- 验证（bindtip-portal.cjs）：tipShown ✓、tipText=已绑定对话：Projects、parent=body、z=1200>
+  overlay 68、tipLeft 249 > btnRight 241（向右伸出）✓、mouseout 隐藏 ✓；functional-diag
+  ERROR_COUNT: 0。
+- 备注：纯客户端改动，F5 即生效。
+
+
 ## 补记（绑定按钮 hover 修复：气泡改向左伸出 + hover 区加大）
 
 - 用户反馈：已绑定对话的 hover 气泡被右侧对话窗挡住（怀疑堆叠顺序）；hover 底色框太小，

04_test/bindtip-portal.cjs

@@ -0,0 +1,99 @@
+// bindtip-portal.cjs — body 级气泡：向右伸出、z-index 高于分栏浮层、hover 显隐
+const http = require('http');
+const { spawn } = require('child_process');
+const WebSocket = require('ws');
+const PORT = 9346;
+const proc = spawn('C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe', [
+  '--headless=new', '--disable-gpu', '--no-first-run', '--no-default-browser-check',
+  '--window-size=1440,900', '--force-device-scale-factor=1',
+  '--remote-debugging-port=' + PORT,
+  '--user-data-dir=C:\\Users\\SJL\\AppData\\Local\\Temp\\wt-chrome-bindtip',
+  'about:blank',
+], { stdio: 'ignore' });
+const getJSON = (p) => new Promise((res, rej) => {
+  http.get({ host: '127.0.0.1', port: PORT, path: p }, (r) => { let d=''; r.on('data',c=>d+=c); r.on('end',()=>{try{res(JSON.parse(d))}catch(e){rej(e)}}) }).on('error', rej);
+});
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+(async () => {
+  let list = null;
+  for (let i = 0; i < 40; i++) { try { list = await getJSON('/json/list'); if (list && list.length) break; } catch {} await sleep(500); }
+  const target = list.find((t) => t.type === 'page') || list[0];
+  const ws = new WebSocket(target.webSocketDebuggerUrl);
+  let id = 0; const pending = new Map();
+  const send = (method, params) => new Promise((res) => { const mid = ++id; pending.set(mid, res); ws.send(JSON.stringify({ id: mid, method, params })); });
+  ws.on('message', (raw) => { const m = JSON.parse(String(raw)); if (m.id && pending.has(m.id)) { pending.get(m.id)(m); pending.delete(m.id); } });
+  await new Promise((r) => ws.on('open', r));
+  await send('Runtime.enable');
+  await send('Page.enable');
+  await send('Page.addScriptToEvaluateOnNewDocument', {
+    source: "try{ if(window===window.top && location.origin==='http://127.0.0.1:3080'){ localStorage.setItem('dsh.worktable.projects.v1', JSON.stringify({order:[],lastUsed:{},hidden:[],nameOverrides:{},shortcuts:[],layouts:[{id:'t-layout',title:'L',top:null,left:null,main:[{id:'p1',title:'W',min:200,content:null}],chatWidth:{default:320,min:240,max:600},chatSide:'right',chatFullHeight:false}],bindings:{}})); } }catch(e){}",
+  });
+  await send('Page.navigate', { url: 'http://127.0.0.1:3080/' });
+  const evaluate = async (expr) => {
+    const r = await send('Runtime.evaluate', { expression: expr, returnByValue: true, awaitPromise: true });
+    if (r.result && r.result.exceptionDetails) return { __error: (r.result.exceptionDetails.exception || {}).description || r.result.exceptionDetails.text };
+    return r.result && r.result.result ? r.result.result.value : undefined;
+  };
+  let ready = null;
+  for (let i = 0; i < 30; i++) { await sleep(1000); ready = await evaluate("!!window.__dshWorktable && !!window.__dshSessions"); if (ready === true) break; }
+  await sleep(1500);
+  const step = await evaluate(`(async function(){
+    var out = {};
+    var sleep = function(ms){ return new Promise(function(r){ setTimeout(r, ms); }); };
+    var vis = function(sel){ return [].slice.call(document.querySelectorAll(sel)).find(function(el){ return (getComputedStyle(el).visibility!=='hidden'&&el.getBoundingClientRect().height>0); }); };
+    try {
+      var card = document.querySelector('.dsh-wt_layout');
+      var btn = card && card.querySelector('.dsh-wt_bindBtn');
+      // 绑定一个对话（UI 路径）
+      btn.click();
+      await sleep(900);
+      var items = [].slice.call(document.querySelectorAll('.dsh-wt_bindList .dsh-wt_selectItem'));
+      if (items[0]) { items[0].click(); }
+      await sleep(900);
+      // 打开一个分栏工作区（浮层 z 68-72），验证气泡层级压得过它
+      var st = window.__dshWorktable.splitStore;
+      st.open({id:'t-over',title:'over',top:null,main:[{id:'p1',title:'W',min:200,content:null}],chatWidth:{default:320,min:240,max:600}});
+      await sleep(900);
+      var btn2 = card.querySelector('.dsh-wt_bindBtn');
+      var br = btn2.getBoundingClientRect();
+      window.__testFired = false;
+      document.addEventListener('mouseover', function(){ window.__testFired = true; }, true);
+      btn2.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, cancelable: true }));
+      await sleep(120);
+      out.testFired = window.__testFired;
+      var tip = document.querySelector('.dsh-wt_bindTip');
+      out.tipEl = !!tip;
+      out.tipDisplay = tip ? getComputedStyle(tip).display : null;
+      out.btnTipAttr = btn2.getAttribute('data-tip');
+      out.tipCalls = window.__tipCalls || 0;
+      out.listenersFlag = window.__bindTipListeners === true;
+      out.runs = window.__bindTipRuns || 0; out.cleans = window.__bindTipCleans || 0;
+      out.overCalls = window.__overCalls || 0; out.overDocIsMain = window.__overDocIsMain;
+      out.overTarget = window.__overTarget; out.overClosest = window.__overClosest;
+      out.tipShown = !!tip && getComputedStyle(tip).display !== 'none';
+      if (tip) {
+        var tr = tip.getBoundingClientRect();
+        out.tipText = tip.textContent;
+        out.tipParentIsBody = tip.parentElement === document.body;
+        out.tipZ = getComputedStyle(tip).zIndex;
+        out.tipRightOfBtn = tr.left >= br.right - 1;
+        out.tipLeft = Math.round(tr.left); out.btnRight = Math.round(br.right);
+        var overlay = document.querySelector('.dsh-wt_pane');
+        out.overlayZ = overlay ? getComputedStyle(overlay).zIndex : null;
+      }
+      btn2.dispatchEvent(new MouseEvent('mouseout', { bubbles: true, cancelable: true }));
+      await sleep(120);
+      out.tipHiddenAfterOut = !tip || getComputedStyle(tip).display === 'none';
+      st.close();
+      // 清理：解绑
+      btn2.click();
+      await sleep(900);
+      var unbind = vis('.dsh-wt_bindUnbind');
+      if (unbind) { unbind.click(); }
+      await sleep(400);
+    } catch(e) { out.err = String(e); }
+    return JSON.stringify(out);
+  })()`);
+  console.log('BINDTIP:', JSON.stringify(step));
+  ws.close(); proc.kill(); process.exit(0);
+})().catch((e) => { console.error('FATAL', e && e.stack || e); try { proc.kill(); } catch {} process.exit(1); });