vue制作跟随鼠标移动的冒泡提示框

你可以通过以下步骤来制作跟随鼠标移动的冒泡提示框：

1. 在Vue组件中，为需要触发冒泡提示框的元素添加一个鼠标移入事件。

2. 在事件处理函数中，使用Vue的$refs属性获取到冒泡提示框的DOM元素，并设置其display属性为block，显示冒泡提示框。

3. 在事件处理函数中，使用event.clientX和event.clientY获取鼠标当前位置的坐标，并将这些坐标值作为样式属性设置到冒泡提示框的位置上，实现跟随鼠标移动。

4. 为需要触发关闭冒泡提示框的元素添加一个鼠标移出事件。

5. 在事件处理函数中，将冒泡提示框的display属性设置为none，隐藏冒泡提示框。

以下是一个示例代码：

<template>
  <div>
    <button @mouseover="showTooltip" @mouseout="hideTooltip">Hover me</button>
    <div class="tooltip" ref="tooltip">This is a tooltip</div>
  </div>
</template>

<script>
export default {
  methods: {
    showTooltip(event) {
      this.$refs.tooltip.style.display = 'block';
      this.$refs.tooltip.style.left = event.clientX + 'px';
      this.$refs.tooltip.style.top = event.clientY + 'px';
    },
    hideTooltip() {
      this.$refs.tooltip.style.display = 'none';
    }
  }
};
</script>

<style>
.tooltip {
  position: fixed;
  display: none;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
}
</style>

在上面的示例中，我们为一个按钮添加了鼠标移入和移出事件。在鼠标移入事件处理函数中，我们获取到了冒泡提示框的DOM元素，并设置其display属性为block，让其显示出来。然后，我们将鼠标当前位置的坐标作为样式属性设置到冒泡提示框的位置上，实现跟随鼠标移动。在鼠标移出事件处理函数中，我们将冒泡提示框的display属性设置为none，隐藏冒泡提示框。最后，我们还定义了一些CSS样式来美化冒泡提示框的外观。