给一个容器添加el-popover/el-tooltip内容提示框

效果： 

html:

   

            

              

                {{ item.formula }}
                

              
              
{{ item.title }}
              

                
{{ item.num }}
                
{{ item.unit }}
                
{{ item.label }}
              
              
{{ item.compare }}
            
          

 js:

 evaluateList: [
        {
          title: "取水关键指标",
          num: "1.3",
          unit: "m³水/吨焦",
          label: "吨焦取水量",
          compare: "节水企业 < 1.2",
          formula: "吨焦取水量(%)=取水量（m³)/企业产焦量(吨)",
          showTooltip: false,
        },
        {
          title: "用水漏损关键指标",
          num: "0",
          unit: "%",
          label: "用水综合漏损率",
          compare: "节水企业 < 3",
          formula: "用水综合漏失率(%)=漏失水量(m³)/取水量(m³)",
          showTooltip: false,
        },
        {
          title: "重复利用关键指标",
          num: "98.5",
          unit: "%",
          label: "间接冷却水循环率",
          compare: "节水企业 ≥ 98",
          formula: "间接冷却水循环率(%)=间接冷却水循环量(m³)/(间接冷却水循环量(m³)+间接冷却水系统补充水量(m³))",
          showTooltip: false,
        },
        {
          title: "重复利用关键指标",
          num: "79.2",
          unit: "%",
          label: "废水回收率",
          compare: "节水企业 ≥ 75",
          formula: "废水回用率(%)=回用水量(m³)/废水收集量(m³)",
          showTooltip: false,
        },
        {
          title: "重复利用关键指标",
          num: "98.0",
          unit: "%",
          label: "重复利用率",
          compare: "节水企业 ≥ 98",
          formula: "重复利用率(%)=复用水量(m³)/用水量(m³)",
          showTooltip: false,
        },
      ],

 cluStyle(content) {
      if (content.length && content.length <50) {
        return `top:-60px`
      }
      if (content.length && content.length >50) {
        return `top:-80px`
      }
    },
    mouseenterHandler(item) {
      item.showTooltip = true
    },
    mouseleaveHandler(item) {
      item.showTooltip = false
    },

css:

 .evaluate {
        width: 100%;
        height: calc(100% - 20px);
        display: flex;
        justify-content: space-around;

        .list {
          width: 20%;
          height: 100%;
          position: relative;

          .title {
            font-size: 14px;
            color: #47e2ff;
          }

          .num-box {
            width: 108px;
            height: 116px;
            background: url(~@/assets/img/text-bg3.png);
            display: flex;
            flex-direction: column;
            align-items: center;

            .num {
              font-family: "ShuHeiTi";
              font-size: 20px;
              margin-top: 30px;
            }

            .unit {
              margin-bottom: 15px;
            }
          }

          .compare {
            background-color: #326aef;
            padding: 5px 20px;
          }

          .formula {
            position: absolute;
            top: -80px;
          }
        }
      }

 下面这里不要加作用域 scoped否则不生效哦！！