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

效果：?

html:

   <div class="evaluate">
            <div class="list flex-column-center" v-for="(item, index) in evaluateList" :key="index"
              @mouseenter="mouseenterHandler(item)" @mouseleave="mouseleaveHandler(item)">
              <div class="el-popover el-popper el-popover--plain formula" x-placement="top"
                v-if="item.showTooltip" :style="cluStyle(item.formula)">
                {{ item.formula }}
                <div x-arrow="" class="popper__arrow" style="left: 116px;"></div>
              </div>
              <div class="title">{{ item.title }}</div>
              <div class="num-box">
                <div class="num">{{ item.num }}</div>
                <div class="unit">{{ item.unit }}</div>
                <div class="label">{{ item.label }}</div>
              </div>
              <div class="compare">{{ item.compare }}</div>
            </div>
          </div>

?js:

 evaluateList: [
        {
          title: "取水关键指标",
          num: "1.3",
          unit: "m3水/吨焦",
          label: "吨焦取水量",
          compare: "节水企业 < 1.2",
          formula: "吨焦取水量(%)=取水量（m3)/企业产焦量(吨)",
          showTooltip: false,
        },
        {
          title: "用水漏损关键指标",
          num: "0",
          unit: "%",
          label: "用水综合漏损率",
          compare: "节水企业 < 3",
          formula: "用水综合漏失率(%)=漏失水量(m3)/取水量(m3)",
          showTooltip: false,
        },
        {
          title: "重复利用关键指标",
          num: "98.5",
          unit: "%",
          label: "间接冷却水循环率",
          compare: "节水企业 ≥ 98",
          formula: "间接冷却水循环率(%)=间接冷却水循环量(m3)/(间接冷却水循环量(m3)+间接冷却水系统补充水量(m3))",
          showTooltip: false,
        },
        {
          title: "重复利用关键指标",
          num: "79.2",
          unit: "%",
          label: "废水回收率",
          compare: "节水企业 ≥ 75",
          formula: "废水回用率(%)=回用水量(m3)/废水收集量(m3)",
          showTooltip: false,
        },
        {
          title: "重复利用关键指标",
          num: "98.0",
          unit: "%",
          label: "重复利用率",
          compare: "节水企业 ≥ 98",
          formula: "重复利用率(%)=复用水量(m3)/用水量(m3)",
          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否则不生效哦！！

<style lang="scss">
.el-tooltip__popper {
  font-size: 14px;
  max-width: 20%
}
.el-popover--plain {
  padding: 10px;
}

效果：

html:?

  <avue-crud :option="optionWatervolume" v-show="activeTab == 'watervolume'" :table-loading="loading" :data="data"
            :page.sync="page" :search.sync="searchForm" v-model="form" ref="crud" :permission="permissionList"
            @row-click="rowClick" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad" @cell-mouse-enter="cellMouseEnter"
            @cell-mouse-leave="cellMouseLeave">
            <template slot-scope="{ row }" slot="deviceName">
              <!-- 悬浮提示 -->
              <el-tooltip placement="top" v-model="row.showTooltip" :open-delay="500" effect="light"
                :disabled="!row.showTooltip" class="device">
                <!-- 注意 显示单元格浮框时 v-model 和 disabled 属性要一起使用才有效果 -->
                <div slot="content">
                  {{ row.text }}
                </div>
                <div>{{ row.deviceName }}</div>
              </el-tooltip>
            </template>
            <template slot-scope="{ row }" slot="fieldTag">
              <el-row class="row">
                <el-select v-model="row.fieldTag" placeholder="请选择" @change="handselect(row, row.fieldTag)" ref="select"
                  size="mini">
                  <el-option v-for="(item, index) in row.waterFieldConfigList" :key="index" :label="item.fieldTag"
                    :value="item.fieldName">
                  </el-option>
                </el-select>
              </el-row>
            </template>
            <template slot-scope="{ row }" slot="measurementMethod">
              <el-row class="row">
                <span>{{ row.measurementMethod == "REALTIME_VALUE" ? "实时值" : row.measurementMethod == "CUMULATIVE_VALUE" ?
                  "累计值" : "-"
                }}</span>
              </el-row>
            </template>
          </avue-crud>

js：

  cluStyle(content) {
      if (content.length && content.length == 10) {
        return `bottom:-${content.length*6}px`
      }
      if (content.length && content.length < 10) {
        return `bottom:-${content.length * 10}px`
      }
      if (content.length&& content.length > 14&&content.length <30 ) {
        return `bottom:-${content.length*4}px`
      }
      if (content.length&&content.length >29 && content.length <40) {
        return `bottom:-${content.length*3}px`
      }
      if (content.length && content.length >39 && content.length <75) {
        return `bottom:-${content.length*2.2}px`
      }
      if (content.length && content.length >74&& content.length <90) {
        return `bottom:-${content.length*2}px`
      }
      if (content.length && content.length >89) {
        return `bottom:-${content.length*1.8}px`
      }
     
     
    },

cellMouseEnter(row, column, cell, event) {
      if (column.label == "计量设备") {
        check(row.id).then(res => {
          let text = ""
          if (res.data.code == 200) {
            text = res.data.data
            this.$set(row, "text", text)
            this.$set(row, "showTooltip", true)
          }
        })
      }
    },
    cellMouseLeave(row) {
      this.$set(row, "showTooltip", false)
    },

css:

<style lang="scss">
.el-tooltip__popper {
  font-size: 14px;
  max-width: 20%
}
</style>