Question

在vue中，怎么控制element-ui tooltip的隐藏和显示
默认mouseover显示tooltip
如何实现鼠标单击显示？

这实际上是segmentfault的代码框复制功能，如下代码框，右上角会出现一个“复制”的tooltip，然后单击后会变成“已复制”的提示
请问vue中如何实现？

代码框演示
点击这个灰色框的右上角可以复制

Answer 1

<el-tooltip :manual="true" v-model="disabled" >
    <el-button @click="disabled = !disabled">上左</el-button>
</el-tooltip>

多个tooltip

<el-tooltip v-for="(item, index) in list" :key="index" :manual="true" v-model="item.disabled" :content="item.content">
   <el-button @click="toggleDisabled(index)">{{item.content}}</el-button>
 </el-tooltip>

 list: [{
          disabled: true,
          content: '直接显示'
       },
       {
          disabled: false,
          content: '点击显示'
       }]
toggleDisabled(index) {

  this.list[index].disabled = !this.list[index].disabled;

}