vue-popperjs example

by Igor Ognichenko

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue-popperjs/dist/js/vue-popper.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-popperjs/dist/css/vue-popper.css">
<div>
  <a href="https://www.npmjs.com/package/vue-popperjs">VueJS popover component</a>
  <br>
  <br>
</div>

<div id="app">
  <popper trigger="hover" :options="{placement: 'top'}">
    <div class="popper">
      Popper Content
    </div>

    <a href="#" slot="reference" class="top">
      Top
    </a>  
  </popper>

  <popper trigger="hover" :options="{placement: 'bottom'}">
    <div class="popper">
      Popper Content
    </div>

    <a href="#" slot="reference" class="bottom">
      Bottom
    </a>  
  </popper>

  <popper trigger="hover" :options="{placement: 'left'}">
    <div class="popper">
      Popper Content
    </div>

    <a href="#" slot="reference" class="right">
      Left
    </a>  
  </popper>
  
  <popper trigger="hover" :options="{placement: 'right'}">
    <div class="popper">
      Popper Content
    </div>

    <a href="#" slot="reference" class="left">
      Right
    </a>  
  </popper>
</div>

CSS

.top {
  margin: 0 auto;
  display: table;
}

.bottom {
  position: absolute;
  top: 40%;
  left: 45%;
}

.right {
  position: absolute;
  right: 20px;
}

.left {
  position: absolute;
}

.right, .left {
  top: 25%;
}

JavaScript

new Vue({
  el: '#app',
  components: {
  	'popper': VuePopper
  }
});