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</button>
</div>
<hr/>
  
  

  <a href="#" id="example" class="btn btn-primary" rel="popover"
     data-content='This is the body of Popover.<b>skdfj</b> skdfjsdfj. 

     <input class="form-control" type="text"/>
     <hr/>
     <button @click="changeText()" class="btn btn-success">Submit</button>

     '
     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('nn');
    }
  }
});

$(function () {
    $('#example').popover({html: true});
});