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: <i>{{message}}</i>
  </div>

            <div class="popover">
              <button type="button" class="popover-trigger btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top">
                Pop.
              </button>
              <div class="popover-content">
                Popover
                <strong>rich-text</strong> content. test: {{message}}
              </div>
            </div>  
  
  
</div>

CSS

#app {
  margin: 100px;
}

JavaScript

var vm = new Vue({
	el: '#app',
  data: function() {
  	return {
    	message: 'This is a test.'
    }
  },
  methods: {
  	changeText: function() {
    	this.message = 'changed';
    }
  },
  updated: function() {
  
    this.$nextTick(() => {
      jQuery(".popover").each(function($index, elem) {
        const triggerElem = elem.querySelector('.popover-trigger');
        const contentElem = elem.querySelector('.popover-content');
        jQuery(triggerElem).popover({
          content: contentElem
        })
      });
    });
  }
});