manja_ui_dev/Vue_Full_Project/src/views/base/Popovers.vue

<template>
  <div class="wrapper">
    <div class="animated fadeIn">
      <b-card
        header-tag="header"
        footer-tag="footer">
        <div slot="header">
          <i className="fa fa-align-justify"></i><strong>Bootstrap Popovers</strong>
          <div class="card-actions">
            <a href="https://bootstrap-vue.js.org/docs/components/popovers" target="_blank">
              <small className="text-muted">docs</small>
            </a>
          </div>
        </div>
        <b-row>
          <b-col cols="6">
            <div class="my-3 text-center">
              <b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">
                Hover Me
              </b-btn>
            </div>
          </b-col>
          <b-col cols="6">
            <div class="my-3 text-center">
              <b-btn id="popoverButton-open" variant="primary">Button</b-btn>

              <b-popover show target="popoverButton-open" title="Popover">
                I start <strong>open</strong>
              </b-popover>
            </div>
          </b-col>
        </b-row>
      </b-card>
      <b-card
        header-tag="header"
        footer-tag="footer">
        <div slot="header">
          <i className="fa fa-align-justify"></i><strong>Popovers</strong>
          <small>placement</small>
        </div>
        <div class="my-3">
          <b-row>
            <b-col md="4" class="py-4 text-center"
                   v-for="placement in placements" :key="placement">
              <b-btn :id="'exPopover1-'+placement" variant="primary">
                {{ placement }}
              </b-btn>
              <b-popover :target="'exPopover1-'+placement"
                         :placement="placement"
                         title="Popover!"
                         triggers="hover focus"
                         :content="`Placement ${placement}`">
              </b-popover>
            </b-col>
          </b-row>
        </div>
      </b-card>
      <b-card class="d-sm-down-none"
              header-tag="header"
              footer-tag="footer">
        <div slot="header">
          <i className="fa fa-align-justify"></i><strong>Popovers</strong>
          <small>via properties or slots</small>
        </div>
        <b-row>
          <b-col md="6" class="py-4 text-center">
            <b-btn id="exPopover2" variant="primary">Using properties</b-btn>
            <b-popover target="exPopover2"
                       title="Prop Examples"
                       triggers="hover focus"
                       content="Embedding content using properties is easy">
            </b-popover>
          </b-col>
          <b-col md="6" class="py-4 text-center">
            <b-btn id="exPopover3" variant="primary">Using slots</b-btn>
            <b-popover target="exPopover3" triggers="hover focus">
              <template slot="title">Content via Slots</template>
              Embedding content <span class="text-danger">using slots</span>
              affords you <em>greater <strong>control.</strong></em> and
              basic HTML support.
            </b-popover>
          </b-col>
        </b-row>
      </b-card>
      <b-card
        header-tag="header"
        footer-tag="footer">
        <div slot="header">
          <i className="fa fa-align-justify"></i><strong>Popovers</strong>
          <small>show</small>
        </div>
        <div class="d-flex flex-column text-md-center">
          <div class="p-2">
            <b-btn id="popoverButton-sync" variant="primary">I have a popover</b-btn>
          </div>
          <div class="p-2">
            <b-btn class="px-1" @click="show = !show">Toggle Popover</b-btn>

            <b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
              Hello <strong>World!</strong>
            </b-popover>
          </div>
        </div>
      </b-card>
      <b-card
        header-tag="header"
        footer-tag="footer">
        <div slot="header">
          <i className="fa fa-align-justify"></i><strong>Popover</strong>
          <small>open/close events</small>
        </div>
        <div class="d-flex flex-column text-md-center">
          <div class="p-2">
            <b-btn id="popoverButton-event" variant="primary">I have a popover</b-btn>
          </div>
          <div class="p-2">
            <b-btn class="px-1" @click="onOpen">Open</b-btn>
            <b-btn class="px-1" @click="onClose">Close</b-btn>
          </div>

          <b-popover ref="popover1" target="popoverButton-event" title="Popover">
            Hello <strong>World!</strong>
          </b-popover>
        </div>
      </b-card>
      <b-card
        header-tag="header"
        footer-tag="footer">
        <div slot="header">
          <i className="fa fa-align-justify"></i><strong>Popover</strong>
          <small>enable/disable events</small>
        </div>
        <div class="d-flex flex-column text-md-center">
          <div class="p-2">
            <b-btn id="popoverButton-disableevent" variant="primary">I have a popover</b-btn>
          </div>
          <div class="p-2">
            <b-btn class="px-1" @click="onEnable">Enable</b-btn>
            <b-btn class="px-1" @click="onDisable">Disable</b-btn>
          </div>

          <b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
            Hello <strong>World!</strong>
          </b-popover>
        </div>
      </b-card>
      <b-card
        header-tag="header"
        footer-tag="footer">
        <div slot="header">
          <i className="fa fa-align-justify"></i><strong>Popover</strong><small><code>v-b-popover</code>directive</small>
        </div>
        <b-row>
          <b-col md="3" class="py-3 text-center">
            <b-btn v-b-popover.hover.top="'I am Top'"
                   title="Popover!"
                   variant="primary">Top</b-btn>
          </b-col>
          <b-col md="3" class="py-3 text-center">
            <b-btn v-b-popover.hover.left="'I am Left'"
                   title="Popover!"
                   variant="primary">Left</b-btn>
          </b-col>
          <b-col md="3" class="py-3 text-center">
            <b-btn v-b-popover.hover.right="'I am Right'"
                   title="Popover!"
                   variant="primary">Right</b-btn>
          </b-col>
          <b-col md="3" class="py-3 text-center">
            <b-btn v-b-popover.hover.bottom="'I am Bottom'"
                   title="Popover!"
                   variant="primary">Bottom</b-btn>
          </b-col>
        </b-row>
      </b-card>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'popovers',
    data () {
      return {
        placements: [
          'topright', 'top', 'topleft',
          'bottomright', 'bottom', 'bottomleft',
          'righttop', 'right', 'lefttop',
          'rightbottom', 'left', 'leftbottom'
        ],
        show: false
      }
    },
    methods: {
      onOpen () {
        this.$refs.popover1.$emit('open')
      },
      onClose () {
        this.$refs.popover1.$emit('close')
      },
      onEnable () {
        this.$refs.popover2.$emit('enable')
      },
      onDisable () {
        this.$refs.popover2.$emit('disable')
      }
    }
  }
</script>