手动控制tooltip文字提示的显隐

默认情况下，element ui 的文字提示tool-tip组件是

在鼠标移入事件mouseenter触发时显示，

在鼠标离开事件mouseleave 触发时隐藏

<el-tooltip content="Top center" placement="top"> <el-button>Dark</el-button> </el-tooltip>

clipboard.png

如果不想通过鼠标移入离开事件去控制tool-tip组件的显隐，想手动的去控制，

可以设置属性manual为true,这样mouseenter 和 mouseleave 事件将不会生效，

然后通过控制v-model的值为true让tool-tip显示，为false让tool-tip隐藏

<template> 
   <el-tooltip content="Top center" placement="top" manual v-model="isShow"> 
    <el-button @click="isShow = !isShow"> {{isShow? '显示':'隐藏'}}文字提示 </el-button>
   </el-tooltip> 
</template> 
<script>
 export default { 
  data() { 
    return { 
      isShow: false 
    }
  } 
}
</script>