Add toggle property in v-b-popover for touch - vue.js

Question

I am using v-b-popover.
My devices are touch and mouse events.
So I am using v-b-popover.hover as a tag.
So I wanted to know, Is their anyway I can toggle the popover(show and hide) in both touch and mouse events.
<b-col v-for="lesson in Lessons">
<b-button
v-b-popover.hover.bottom="lesson.lessonName">
{{lesson.lessonName}}
</b-button>
</b-col>

Answer 1

The tooltip's hover trigger, includes touch on mobile by default. So it should already work with no changes if all you need is touch events on mobile, and hover on desktop.
<b-button v-b-popover.hover="'Hello World!'">
A tooltip is shown on hover on desktop, and touch on mobile.
</b-button>
If you want to support mouse clicks on desktop, you'll need an additional trigger. Either click or focus should work for that.
<b-button v-b-popover.hover.click="'Hello World!'">
A tooltip is shown on hover/click on desktop, and click on mobile.
</b-button>

Answer 2

You can use the v-b-popover.hover.focus.bottom directive for your buttons and then all your button can be triggered by click or hover, and it meets your requirements in mobile devices and mouse events,
new Vue({
el: '#app',
mounted() {
document.getElementsByTagName('body')[0].addEventListener('click', e => {
this.$root.$emit('bv::hide::popover')
});
}
})
#app {
margin: 2rem;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-button v-b-popover.hover.focus.bottom="'Hellow World!'" variant="info">Your Button</b-button>
</div>