vue-popperjs 2.x example

by Nicke Manarin

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" style="background: blue">
      <span>
      text
      <br>
      text 2
      </span>
    </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
  }
});