Bootstrap 3.0 Popover Sample

by Edward Tanguay

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div id="app">
  <div>
    Message: {{message}}
  </div>
  <div>
  <button @click="changeText()">outside works</button>
  </div>
  <hr/>
    <a href="#" 
       id="example" 
       class="btn btn-primary" 
       rel="popover"
       data-original-title="Test Form"
       >Fill out form</a>
</div>

CSS

#app {
  margin: 100px;
}

JavaScript

var vm = new Vue({
	el: '#app',
  data: function() {
  	return {
    	message: 'hello'
    }
  },
  methods: {
  	changeText: function() {
    	alert('test');
    }
  }, 
  mounted: function() {
  	$('#example').popover(
    {
    html: true,
    template: '<div class="tooltip"><div class="tooltip-inner" style="border: 1px solid #ddd; background-color:#fff"><div class="form-group"><label for="exampleInputPassword1" style="color: #000">Name</label><input type="text" class="form-control"></div><button @click="changeText()" class="btn btn-success">Submit</button></div></div>'
    }
    
    );
  }
});