CODEWITHSUNDEEP
vue.jsbootstrap-4vuejs2touch-eventbootstrap-vue
Ameet deadpool
Ameet deadpool

Reputation: 39

How can i close the vue popover when i scroll the screen

I haven't decided any popover for Vue. Device is Touch devices For touch devices I need click event for opening of popover. Scenario: I used Vue bootstrap popover or tooltip it is stuck to the screen when I am scrolling. I need to remove when scrolling

Upvotes: 0

Views: 1922

Answers (1)

Iman Shafiei
Iman Shafiei

Reputation: 1637

You can use this snippet:

new Vue({
  el: "#app",
  methods: {
    do_sth() {
      this.$root.$emit('bv::hide::popover')
    }
  },
  created () {
      window.addEventListener('scroll', this.do_sth);
  },
});
body .wrapper {
    padding: 100px 20px;
    min-height: 2000px;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>


<div id="app">
<div class="wrapper">
<b-button
  href="#"
  tabindex="0"
  v-b-popover.click="'Popover content'"
  title="Popover title"
>
  Link button with popover directive
</b-button>

</div>

</div>

Upvotes: 4

Related Questions