在vue中，怎么控制element-ui tooltip的隐藏和显示？

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;

}

Answer 2

配置 manual 为 true，打开手动控制模式，然后给元素加 click 事件就可以啦～

Answer 3

disabled属性可以实现控制显示隐藏的功能

<template\>  
    <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">  
        <el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button>  
    </el-tooltip>  
</template>  

<script> 
export default { 
    data() { 
        return { 
            disabled: false 
           }; 
        } 
   }; 
</script\>

---

如果是多个tooltip的话，v-for中可以使用模板字符串

 <el-tooltip 
    v-for="(item,index) in list"
    :key="index"
    :disabled="`disabled${index}`" 
    content="点击关闭 tooltip 功能" 
    placement="bottom" 
    effect="light"
 >  
 </el-tooltip>  

Answer 4

点击让disabled 变为false 之后，还是要移出，再移入才展示tip，怎样才能点击立马就展示tip