Popover - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/popover

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<div id="app">
  <h4 class="mt-sm-4 ms-sm-4 text-muted">Placement</h4>
  <div class="row">
    <div class="col-md-3 my-1 text-center" v-for="placement in ['top', 'left', 'right', 'bottom']">
      <b-popover :placement="placement" content="Heya!">
        <b-btn variant="primary">{{ placement }}</b-btn>
      </b-popover>
    </div>
  </div>

  <h4 class="mt-sm-4 ms-sm-4 text-muted">Triggers</h4>
  <div class="row">
    <div class="col-md-4 my-1 text-center" v-for="trigger in triggerExamples">
      <b-popover :triggers="trigger" content="Trigger warning!">
        <b-btn variant="primary">{{ triggersToString(trigger) }}</b-btn>
      </b-popover>
    </div>
  </div>

  <h4 class="mt-sm-4 ms-sm-4 text-muted">Content via properties or slots</h4>
  <div class="row">
    <div class="col-md-6 my-1 text-center">
      <b-popover content="Embedding content using properties is easier as well as simpler to make dynamic.">
        <b-btn variant="primary">Using properties</b-btn>
      </b-popover>
    </div>
    <div class="col-md-6 my-1 text-center">
      <b-popover>
        <b-btn variant="primary">Using slots</b-btn>
        <span slot="content">
                            Embedding content <span
                                style="color: red">using slots</span> affords you <em>greater <strong>control.</strong></em>
        </span>
      </b-popover>
    </div>
  </div>

  <h4 class="mt-sm-4 ms-sm-4 text-muted">Delay</h4>
  <div class="row">

    <div class="col-md-4 my-1 text-center">
      <b-popover...

CSS

#app {
  padding: 20px;
  height: 550px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    triggerExamples: [
      'click',
      'focus',
      'hover', ['click', 'focus'],
      ['click', 'hover'],
      ['focus', 'hover']
    ],
  },
  methods: {
    clickEventConfirmed() {
        console.log('hello world');
        alert('Form submitted!');
      },
      triggersToString(input) {
        if (Array.isArray(input)) {
          return input.join(' + ');
        }
        return input;
      }
  }
})