如何将Tooltip对齐到多行文本选中区域的中心

原代码使用getBoundingClientRect()获取选中区域的外接矩形，当选中多行文本时，这个矩形会覆盖所有选中行的范围，导致计算出的中心位置是整个大矩形的中心，而非第一行选中区域的中心。

修改后的代码通过获取第一行选中区域的矩形来计算位置：

const getTooltipPosition = () => {
  const selection = window.getSelection();
  if (!selection.rangeCount) return { top: 0, left: 0 };

  const oRange = selection.getRangeAt(0);
  const rects = oRange.getClientRects();
  if (!rects.length) return { top: 0, left: 0 };

  const firstLineRect = rects[0];
  return {
    top: firstLineRect.top - 20, // 保持原有的顶部偏移
    left: firstLineRect.left + firstLineRect.width * 0.5,
  };
};

关键说明 #

• getClientRects()会返回选中区域每一行对应的独立DOMRect对象，rects[0]就是第一行选中区域的位置信息
• 增加了边界判断逻辑，避免无选中内容或矩形列表为空时出现报错
• 基于第一行的左偏移和宽度计算中心位置，确保Tooltip精准对齐第一行选中区域的中心

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