Vue2 实现选中文本后在其上方显示浮动提示（Tooltip）——支持多段文本、跨元素判断与类型过滤

原创于 2025-10-17 14:04:51 发布 · 885 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

前端专栏收录该内容

21 篇文章

订阅专栏

在一些阅读类、笔记类或学习辅助型 Web 应用中，我们经常会需要这样的功能：
当用户在某段文本中选中部分文字时，立即在选中内容的上方显示一个提示气泡（tooltip），用于显示操作按钮或提示信息。

例如：

当用户选中 “456” 时，在其上方出现一个提示 “aaaaa”；
但如果选中的是标题文字、或者跨越多个块元素的文本，就不显示提示。

本文将详细介绍如何在 Vue 2 中实现这一交互效果，并支持：

自动定位 tooltip 到选中文本上方；
判断选区是否跨越多个元素；
仅在指定类型的元素（如 .content）中触发显示；
支持任意数量的 div，无需固定引用。

一、核心思路

实现这个功能的关键有三个部分：

监听选中事件：通过 @mouseup 监听用户鼠标选择结束的动作；
获取选区坐标：使用 window.getSelection() 和 Range.getBoundingClientRect() 获取选中文本的屏幕位置；
逻辑判断与位置定位：
- 判断选区是否在同一个元素内；
- 判断该元素是否满足条件（如 class="content"）；
- 根据选区位置计算 tooltip 的坐标。

二、HTML 结构设计

我们假设页面上有多段文字，每一段可能是标题或正文内容：

<div class="container" @mouseup="handleSelect">
  <div class="title">第一章 标题部分</div>
  <div class="content">3333333</div>
  <div class="content">123456789</div>
  <div class="title">第二章 标题部分</div>
  <div class="content">ABCDEFG</div>
  <div class="content">测试文字123</div>

  <!-- 提示气泡 -->
  <span
    v-if="showTooltip"
    class="tooltip"
    :style="{ top: tooltipPos.top + 'px', left: tooltipPos.left + 'px' }"
  >
    aaaaa
  </span>
</div>

.title 表示章节标题；
.content 表示正文段落；
只有当选中的文字完全在 .content 内时，才显示浮动的 <span>。

三、Vue 2 逻辑实现

export default {
  data() {
    return {
      showTooltip: false, // 是否显示 tooltip
      tooltipPos: { top: 0, left: 0 }, // tooltip 坐标
    };
  },
  methods: {
    handleSelect() {
      const selection = window.getSelection();
      if (!selection.rangeCount) {
        this.showTooltip = false;
        return;
      }

      const range = selection.getRangeAt(0);
      const selectedText = selection.toString().trim();

      // 没有有效选中内容 → 不显示
      if (!selectedText) {
        this.showTooltip = false;
        return;
      }

      // 获取起点与终点节点
      const startNode = range.startContainer;
      const endNode = range.endContainer;

      // 找到各自所属的父级 div
      const startDiv = startNode.nodeType === 1
        ? startNode.closest('div')
        : startNode.parentNode.closest('div');
      const endDiv = endNode.nodeType === 1
        ? endNode.closest('div')
        : endNode.parentNode.closest('div');

      // 若选区跨越不同 div 或未找到父级 div → 不显示
      if (!startDiv || startDiv !== endDiv) {
        this.showTooltip = false;
        return;
      }

      // 若选区不在 content 内 → 不显示
      if (!startDiv.classList.contains('content')) {
        this.showTooltip = false;
        return;
      }

      // 获取选中区域位置
      const rect = range.getBoundingClientRect();
      const containerRect = this.$el.getBoundingClientRect();

      // 计算 tooltip 坐标
      this.tooltipPos = {
        top: rect.top - containerRect.top - 30, // 上方 30px
        left: rect.left - containerRect.left + rect.width / 2,
      };

      this.showTooltip = true;
    },
  },
};

四、样式设计

.container {
  position: relative;
  padding: 50px;
  line-height: 2;
}

.title {
  font-weight: bold;
  color: #2254c5;
  margin-top: 10px;
}

.content {
  color: #333;
  margin-left: 20px;
}

.tooltip {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
}

.container 使用 position: relative，以便 tooltip 可以相对定位；
.tooltip 绝对定位，并向上偏移；
transform: translate(-50%, -100%) 实现居中对齐与向上浮动的视觉效果。

五、逻辑验证

选中内容	所在元素	是否显示 tooltip
`456`	`.content`	✅ 显示
`333`	`.content`	✅ 显示
`第一章标题部分`	`.title`	❌ 不显示
`33333</div><div>1234`	跨两个 `.content`	❌ 不显示
空选区或无选中内容	—	❌ 不显示

六、实现原理详解

1.获取选区

window.getSelection() 返回当前选中的文字及其节点信息。

2.判断选区合法性

通过比较 range.startContainer 和 range.endContainer 的最近父级元素（closest('div')），判断选区是否跨越多个块级元素。

3.条件过滤

通过 element.classList.contains('content') 判断是否在允许显示的元素内。

4.定位 tooltip

利用 getBoundingClientRect() 获取选中文本的屏幕位置，结合父容器坐标计算出相对位置，实现精准定位。

七、优化方向

点击空白处隐藏 Tooltip
可在 document.addEventListener('click', ...) 中监听全局点击事件，点击空白区域时关闭 Tooltip。
动态内容提示
可以将 aaaaa 替换为选中的文字：
```
<span>{{ selectedText }}</span>
```
并在逻辑中保存：
```
this.selectedText = selectedText;
```
动画与过渡
使用 transition 增加浮现与消失动画，提升用户体验。