How to disable v-tooltip when user click outside - vue.js

Question

I use v-tooltip to show tooltip on every cell of table
<td v-tooltip="{content: 'some content', trigger: 'click'}"></td>
But I want when user click another cell, current tooltip will disapear, I have tried "autoHide" property, but it not working.
Thanks
v-tooltip repository:
https://github.com/Akryum/v-tooltip

Answer 1

It's a late answer but maybe it can help someone else:
you can add the tooltip component as a ref and call the hide method:
this.$refs.popover.hide()

Answer 2

I think you will have to use the more customizable v-popover component. The v-tooltip directive doesn't seem to handle manual triggering, and you need manual triggering.
console.clear();
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
selectedCell: null
}
})
body {
font-family: sans-serif;
margin: 42px;
}
.tooltip {
display: block !important;
z-index: 10000;
}
.tooltip .tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
<script src="//unpkg.com/popper.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/v-tooltip"></script>
<div id="app">
<table border="1">
<tr v-for="i in 3">
<td #click="selectedCell = i">
<p><span>This is cell {{ i }}</span></p>
<v-popover trigger="manual" :open="selectedCell === i">
<template slot="popover">
<p>
{{ message }}
</p>
</template>
</v-popover>
</td>
</tr>
</table>
</div>