鼠标悬停v-for元素展示不同信息

可以使用Vue的指令v-tooltip来实现鼠标悬停v-for元素展示不同信息的效果。

首先，你需要安装vue-tooltip插件。可以通过命令行运行以下命令进行安装：

npm install vue-tooltip --save

安装成功后，在main.js中引入vue-tooltip插件：

import VueTooltip from 'vue-tooltip'
Vue.use(VueTooltip)

然后，在需要展示信息的元素上，使用v-tooltip指令，如下所示：

<template>
  <div>
    <ul>
      <li v-for="item in items" v-tooltip="{ content: item.tooltip }">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Apple', tooltip: 'This is an apple' },
        { name: 'Banana', tooltip: 'This is a banana' },
        { name: 'Orange', tooltip: 'This is an orange' },
        { name: 'Grape', tooltip: 'This is a grape' },
      ],
    }
  },
}
</script>

在上面的代码中，v-tooltip指令的值为一个对象，其中content属性为需要展示的信息。当鼠标悬停在li元素上时，会展示对应元素的tooltip属性的值。

注意：需要在样式中设置.tooltip类的样式，以便展示tooltip信息。可以参考vue-tooltip插件文档进行设置。