Javascript 当鼠标悬停在Vue上的图标上时，显示文本框弹出

我正在从事一个个人项目，在这个项目中，我需要获得一个单元内所有设备的状态。此状态以及设备名称在数组中从函数

deviceStatus（）

返回。如果所有设备均

打开

，unit.id旁边的主页图标将变为绿色。如果该装置内的所有设备均已关闭，则主页图标将变为红色。这段代码工作得非常好，如下所示

我正在寻找帮助，以便当鼠标悬停在“主页”图标上时，将从

deviceStatus（）返回的数组显示为弹出的文本框。我对
mouseover
事件感到非常困惑，任何帮助都将不胜感激

<template>
  <div>
    <div class="d-flex flex-row align-items-center py-2 px-2">
      <h1 class="display-1 unit-status m-0">{{ unit ? unit.id : null }}</h1>
      <font-awesome-icon
          icon="home"
          :style="deviceStyling"
          class="tab-icon mx-2"
          size="lg"
          id="unit-info"/>
    </div>
</template>

<script>

export default {

  computed: {
    deviceStatus() {
      const device = this.unitDvc(this.currentSite.id);
      return device.map(dv => {
        const status = this.deviceStat(dv.device_id);
        return { name: dv.name, status };
      });
    },
    deviceStyling() {
      var turnedOn = null;
      var turnedOff = null;
      for (var i = 0; i < this.deviceStatus.length; i++) {
        if (this.deviceStatus[i]['state'] == 'on') {
          turnedOn = turnedOn + 1;
        } else {
          turnedOff = turnedOff + 1;
        }
      }
      if (turnedOn == this.deviceStatus.length) {
        return { 'color': `green` };
      } else if (turnedOff == this.deviceStatus.length) {
        return { 'color': `red` };
      }

    }
  },
</script>


{{unit？unit.id:null}
导出默认值{
计算：{
设备状态（）{
const device=this.unitDvc（this.currentSite.id）；
返回设备.map（dv=>{
const status=this.deviceStat（dv.device_id）；
返回{name:dv.name，status}；
});
},
设备分类（）{
var turnedOn=null；
var-turnedOff=null；
对于（var i=0；i
正如您所提到的，您正在使用HTML和JavaScript，您可以使用HTML的简单属性，即
TITLE
。它的作用很简单，就像
鼠标盖

更多信息：
确保已安装v-tooltip依赖项

npm install --save v-tooltip

并添加到您的应用程序中

import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)

然后可以将指令添加到组件中：

<font-awesome-icon
          v-tooltip="'Status is ' + deviceStatus.name"
          icon="home"
          :style="deviceStyling"
          class="tab-icon mx-2"
          size="lg"
          id="unit-info"/>


你只需使用
标题
属性就可以做到这一点。你可以使用v-tooltip：嗯，这似乎很简单。我从未使用过vue.js，但我想首先创建一个模式/对话框，其显示状态将由鼠标悬停事件（）。随后，您将调用api/websocket连接以返回数组数据，您可以将其传递给modal本身。我想这是一个vue特定的问题，我自己没有使用过。@HansFelixRamos我添加了v-tooltip.top center=“deviceStatus”这当然不是应用我实现的功能的正确方法，我对此感到困惑this@Sara我用我的想法发布了一个答案，我希望它能帮助你。在v-tooltip中使用v-for可以显示数组元素的列表吗？你可以将js代码放在v-tooltip指令中。最好创建一个计算或method获取要显示的文本，然后在v-tooltip中调用它。例如，v-tooltip=“getDevices（listOfDevices）”如果要使用强制v-for，可以使用组件v-popover创建自定义内容。请参阅：