vue-popper-component Star

  
  <popper
    :show-popper.sync="showPopper1"
    content="Lorem ipsum dolor"
    placement="right"
    close-button="Close me!">
      <a @click.prevent="showPopper1 = !showPopper1" href="#">
        Click to open popover on the right
      </a>
  </popper>
  

  
  <popper
    :show-popper.sync="showPopper2"
    content="Lorem ipsum dolor"
    placement="left"
    close-button="">
      <a @click.prevent="showPopper2 = !showPopper2" href="#">
        Click to open popover on the left
      </a>
  </popper>
  

  
  <popper
    :show-popper.sync="showPopper3"
    content="Lorem ipsum dolor"
    placement="top"
    close-button="1">
    
      <div slot="close-button">
        <i class="glyphicon glyphicon-remove"></i>
      </div>
    
      <button class="btn btn-default" @click.prevent="showPopper3 = !showPopper3">
        Click to open popover on the top
      </button>
  </popper>
  

  
  <popper
    :show-popper.sync="showPopper4"
    content="Lorem ipsum dolor"
    placement="top"
    close-button="1">
    
      <div slot="close-button">
        <i class="glyphicon glyphicon-remove"></i>
      </div>
      
      <div slot="content">
        <h2><a href="https://github.com/antongorodezkiy/vue-popper-component" target="_blank"><i class="glyphicon glyphicon-star"></i></a> <b>us</b> <i>on</i> <u>github</u>!</h2>
        <a @click.prevent="showPopper4 = false" href="#">Close this popover from the content!</a>
      </div>
    
      <button class="btn btn-default" @click.prevent="showPopper4 = !showPopper4">
        Click to open popover on the bottom
      </button>
  </popper>

  <button class="btn btn-default" @click.prevent="showPopper4 = !showPopper4">
    Trigger last popover from the outside
  </button>