vue-popperjs 2.x example

by leoliaolei

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://unpkg.com/vue-popperjs/dist/vue-popper.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-popperjs/dist/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>

    <div slot="reference" class="right" style="width:10rem;height:5rem;background:red">
      Lefts
    </div>  
  </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
  }
});