Element 利用Tooltip提示框实现动态显示文字提示_element 在 输入框下面加提示语

利用element的提示框来实现动态显示循环的数据，效果图如下：

这里的四个项都是通过循环数组来展示出来的，需要用Tooltip提示框将代码包裹起来就可以达到此效果，代码如下：
HTML:

<div v-for="(item,index) in choice" :key="index" class="equipmentname center2">
              <i class="el-icon-circle-close" style="margin:0 10px 0 10px;color:#009cde"  />
              <el-tooltip :disabled="item.length <= 10" class="item" placement="top">
                <div slot="content">{{ item }}</div>
                <div class="showname">{{ item }}</div>
              </el-tooltip>
            </div>
1
2
3
4
5
6
7

其中:disabled="item.length <= 10"这段代码是用于控制是否显示提示框的，在这里的用处是当循环出来的数据长度大于10时，就显示提示框，不然就不显示

JS:

data() {
    return {
      choice: [{
        date: '闭式单点快速压力机'
      }, {
        date: '油漆喷涂废气处理'
      }, {
        date: '芯体半自动装配机'

      }, {
        date: '水空自动扣压干试验检测线 (403-314)'

      }, {
        date: '剪切机器人'

      }, {
        date: '隔板清洗烘干剪切设备 (129-295)'

      }]
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

模拟数据如上。