vue鼠标悬停显示文字

要在vue中实现鼠标悬停显示文字，你可以使用v-tooltip指令或者在CSS中使用:hover伪类选择器来实现。以下是两种方法的示例：

1. 使用v-tooltip指令：

<template>
  <div>
    <span v-tooltip="'这是要显示的文字'">鼠标悬停在我上面</span>
  </div>
</template>

<script>
import VTooltip from 'v-tooltip'

export default {
  directives: {
    Tooltip: VTooltip
  }
}
</script>

2. 在CSS中使用:hover伪类选择器：

<template>
  <div>
    <span class="tooltip">鼠标悬停在我上面</span>
  </div>
</template>

<style>
.tooltip {
  position: relative;
}

.tooltip:hover::before {
  content: '这是要显示的文字';
  position: absolute;
  top: -20px;
  left: 0;
  padding: 5px;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
}
</style>

这两种方法都可以实现鼠标悬停显示文字的效果，你可以根据自己的需求选择其中一种。