效果： 

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: "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否则不生效哦！！

<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.datathis.$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>