如何使用JavaScript/CSS为Google Docs内选中的文本添加tooltip提示框

1. 修复选中内容获取错误的问题 #

你原来的代码拿到的是选中元素的完整文本，没有截取选中的部分，需要通过选中范围的起止偏移量提取内容，修正后的代码如下：

function getSelectedText() {
  const doc = DocumentApp.getActiveDocument();
  const selection = doc.getSelection();
  if (!selection) return null;
  const selectedElements = selection.getSelectedElements();
  let selectedText = '';
  selectedElements.forEach(el => {
    const textEl = el.getElement().asText();
    const start = el.getStartOffset();
    const end = el.getEndOffsetInclusive();
    // 部分选中的情况取偏移量之间的内容，完全选中则取全部
    selectedText += el.isPartial() ? textEl.getText().substring(start, end + 1) : textEl.getText();
  });
  return selectedText;
}

2. 悬浮提示功能实现方案 #

Google Docs 不支持直接修改底层DOM添加自定义class，你尝试的直接操作innerHTML、execCommand的方法都不适用，一方面原生DOM结构会随时更新，另一方面非官方的修改会在文档刷新后失效，推荐两种稳定实现方案：

方案一：使用原生批注实现（无额外依赖，最稳定） #

利用Google Docs原生批注的hover显示特性，给选中/匹配的文本绑定自定义定义内容，hover时直接显示批注内容，完全符合需求，实现代码示例：

// 给选中文本添加定义批注，同时批量绑定全文相同文本
function addTooltipToSelected() {
  const selectedText = getSelectedText();
  if (!selectedText) {
    DocumentApp.getUi().alert('请先选中要绑定定义的文本');
    return;
  }
  // 弹出输入框获取要绑定的定义内容
  const ui = DocumentApp.getUi();
  const res = ui.prompt(`请输入「${selectedText}」对应的定义内容：`, ui.ButtonSet.OK_CANCEL);
  if (res.getSelectedButton() !== ui.Button.OK) return;
  const definition = res.getResponseText();

  // 批量处理全文所有匹配的文本
  const body = DocumentApp.getActiveDocument().getBody();
  let searchRes = body.findText(selectedText);
  while (searchRes) {
    const start = searchRes.getStartOffset();
    const end = searchRes.getEndOffsetInclusive();
    const textEl = searchRes.getElement().asText();
    // 给匹配文本添加批注
    textEl.addComment(start, end, definition);
    searchRes = body.findText(selectedText, searchRes);
  }
  ui.alert('绑定完成，hover对应文本即可查看定义');
}

你可以通过DocumentApp.getUi().createMenu创建自定义工具栏按钮，绑定上面的addTooltipToSelected方法即可直接使用。

方案二：自定义样式Tooltip（适合需要定制UI的场景） #

如果需要自定义悬浮提示的样式，可以配合Google Docs插件的侧边栏实现：

• 监听文档光标 hover 事件，通过API获取当前光标位置的文本
• 匹配到已绑定定义的文本时，在侧边栏对应位置展示自定义样式的提示框，或者通过DocumentApp.getUi().showModalDialog展示轻量弹窗

3. 注意事项 #

• 不要直接操作Google Docs的页面DOM，官方没有开放相关能力，手动修改的内容随时会失效
• 所有文本修改、内容绑定都要使用Google Apps Script官方提供的DocumentApp API，保证兼容性和持久性

内容的提问来源于stack exchange，提问作者Luke