如何为选中的文本内容添加tooltip提示框？

1. 原生Web API实现（无框架依赖） #

这个方案不需要引入任何第三方资源，兼容性覆盖所有现代浏览器，适合轻量场景使用：

• 核心依赖 Selection API + Range API 完成坐标计算
  1. 全局监听selectionchange/mouseup事件，触发时调用window.getSelection()获取选中实例，判断选中内容长度是否大于0，长度为0直接隐藏tooltip
  2. 调用selection.getRangeAt(0).getBoundingClientRect()拿到选中文本的相对视口坐标，用返回值的bottom属性作为tooltip的顶部基准位置，水平坐标用left + width/2计算实现居中对齐
  3. 自定义tooltip元素设置position: fixed属性，把计算好的坐标赋值给元素的left/top属性即可控制位置，额外加5-10px的间距避免和文本重叠
  4. 边界场景适配：如果计算出来的tooltip位置超出视口范围，自动调整坐标避免被截断
• 核心代码示例：

const tooltip = document.querySelector('#custom-tooltip')
document.addEventListener('selectionchange', () => {
  const selection = window.getSelection()
  const selectText = selection.toString().trim()
  if (!selectText) {
    tooltip.style.display = 'none'
    return
  }
  const rect = selection.getRangeAt(0).getBoundingClientRect()
  tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`
  tooltip.style.top = `${rect.bottom + 8}px`
  tooltip.style.display = 'block'
})

• 注意：如果用position: absolute定位，需要额外加上页面滚动偏移量document.documentElement.scrollTop/scrollLeft修正坐标。

2. 轻量第三方库实现 #

不想自己处理边界适配、多端兼容的场景可以用封装好的工具库：

• 这类库的底层逻辑还是基于Selection和Range API，额外封装了多行选中文本适配、移动端触屏选中适配、自定义动画等能力，无依赖的工具库大小普遍在10kb以内，不会引入过多体积负担
• 支持自定义tooltip的内容、样式、触发逻辑，不需要修改核心选中判断逻辑

3. 前端框架专属封装 #

在Vue/React等框架项目中可以直接封装为业务组件：

• React：在useEffect钩子中绑定选中监听事件，把坐标、显隐状态存在state中，直接通过props控制tooltip的内容、样式
• Vue：在onMounted钩子中绑定监听事件，用响应式变量存储坐标和显隐状态，和框架的响应式逻辑完全对齐

常见坑点提醒 #

• 优先监听selectionchange事件，比mouseup覆盖范围更广，支持键盘选中、触屏选中等非鼠标操作场景
• 选中文本跨多行时，getBoundingClientRect()返回的是整个选中区域的外接矩形，需要根据业务需求自行调整tooltip的展示位置
• 移动端需要额外监听touchend事件，适配触屏操作的选中逻辑

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