Skip to content

fix(desktop): 修复代码块复制按钮 tooltip 定位偏左的问题#4069

Open
whale-fall-ouo wants to merge 1 commit into
esengine:main-v2from
whale-fall-ouo:fix/code-copy-tooltip-position
Open

fix(desktop): 修复代码块复制按钮 tooltip 定位偏左的问题#4069
whale-fall-ouo wants to merge 1 commit into
esengine:main-v2from
whale-fall-ouo:fix/code-copy-tooltip-position

Conversation

@whale-fall-ouo

Copy link
Copy Markdown
Contributor

问题描述

代码块的复制按钮 hover 时,tooltip 显示在屏幕最左侧,而非按钮旁边。

根因分析

CopyButton 使用 Tooltip 包裹 button,Tooltip 默认用 span 包裹子元素。但复制按钮使用了 position: absolute(脱离文档流),导致 wrapper span 的宽度为 0。

Tooltip.updatePosition() 对这个零宽度 span 调用 getBoundingClientRect(),得到的 rect.left 是 code-block 的最左端,tooltip 就显示在了错误的位置。

修复方案

在 Tooltip 组件中新增可选 triggerRef 外部 ref 支持:

  • Tooltip.tsx — 新增 triggerRef prop,updatePosition 优先使用外部 ref 的元素来计算位置
  • CopyButton.tsx — 创建 button 的 ref,传给 Tooltip 的 triggerRef

wrapper span 仍保留用于事件绑定(hover/focus),位置计算改用 button 自身的实际位置。改动不影响其他 Tooltip 使用场景(triggerRef 是可选的)。

涉及文件

文件 改动
Tooltip.tsx 新增 triggerRef prop,updatePosition 优先使用它
CopyButton.tsx 创建 button ref,传给 Tooltip 的 triggerRef

Fixes #3867

@github-actions github-actions Bot added v2 Go rewrite (1.x) — main-v2 branch, active development desktop Wails desktop app (desktop/**) labels Jun 11, 2026

@SivanCola SivanCola left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

当前需要先处理 base drift,不能直接合入。

最新 main-v2 已在 8ec1130 / #4059 改掉了这条代码路径:CopyButton 不再用 Tooltip 包裹,而是在按钮内部用 .copybtn__label-inline 显示提示,并且代码块按钮已移动到 HljsCode 的

 内。这个 PR 仍然基于旧实现给 Tooltip 增加 triggerRef,所以和最新 main-v2 合并时会在 desktop/frontend/src/components/CopyButton.tsx 产生内容冲突。

我本地验证:git merge-tree --write-tree origin/main-v2 refs/remotes/origin/pr/4069 退出 1,并报告 CopyButton.tsx content conflict。

建议先 rebase 到最新 main-v2。rebase 后如果 #3867 在当前 inline-label 实现下已经不存在,这个 PR 可以关闭为 superseded;如果问题仍能复现,需要基于当前 HljsCode/CopyButton 结构重新修,而不是恢复旧的 Tooltip 包裹路径。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

desktop Wails desktop app (desktop/**) v2 Go rewrite (1.x) — main-v2 branch, active development

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: 复制提示跑偏

3 participants