[Vuejs]-Add toggle property in v-b-popover for touch

by

0👍

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>

0👍

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>

Leave a comment