vue鼠标悬停显示文字

要在Vue中实现鼠标悬停显示文字，你可以使用Vue的指令（directive）来实现。

首先，在你的Vue模板中添加一个元素，比如一个div元素，然后给它添加一个v-tooltip指令，指令的值为要显示的文本，就像这样：

<div v-tooltip="tooltipText">鼠标悬停我</div>

然后，在你的Vue组件或页面的<script>标签中，定义这个指令：

Vue.directive('tooltip', {
  bind: function (el, binding) {
    // 当鼠标悬停在元素上时触发
    el.addEventListener('mouseover', function () {
      // 创建一个div元素来显示文本
      var tooltip = document.createElement('div');
      tooltip.className = 'tooltip';
      tooltip.innerHTML = binding.value;
      // 将div元素添加到页面中
      document.body.appendChild(tooltip);
      // 设置div元素的位置
      tooltip.style.left = el.offsetLeft + 'px';
      tooltip.style.top = el.offsetTop + el.offsetHeight + 'px';
      // 将创建的div元素保存在元素自身的属性中，以便在鼠标移开时可以删除它
      el.tooltip = tooltip;
    });
    // 当鼠标移开元素时触发
    el.addEventListener('mouseout', function () {
      // 删除之前创建的div元素
      document.body.removeChild(el.tooltip);
    });
  }
});

最后，在你的CSS文件中添加以下样式：

.tooltip {
  position: absolute;
  background-color: #000;
  color: #fff;
  padding: 5px;
  font-size: 14px;
}

这样，当鼠标悬停在div元素上时，就会显示指定的文本。你还可以根据需要调整样式和位置。