默認(rèn)情況下刑然,element ui 的文字提示tool-tip組件是
在鼠標(biāo)移入事件mouseenter觸發(fā)時(shí)顯示蒸眠,
在鼠標(biāo)離開事件mouseleave 觸發(fā)時(shí)隱藏
<el-tooltip content="Top center" placement="top"> <el-button>Dark</el-button> </el-tooltip>
clipboard.png
如果不想通過鼠標(biāo)移入離開事件去控制tool-tip組件的顯隱圆凰,想手動(dòng)的去控制远舅,
可以設(shè)置屬性manual為true,這樣mouseenter 和 mouseleave 事件將不會(huì)生效带污,
然后通過控制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>