# V-Popover

For the Popovers we used a Vue.js library named v-tooltip who also have the v-popover already integrated. 

import { VPopover } from 'v-tooltip';

# Local Usage 

components: {
  VPopover
}

# Global Usage 

Vue.component("v-popover", VPopover);

In this product already this plugin it's globally installed

# Examples Popovers 

<div class="md-layout">
  <div class="md-layout-item md-size-15 md-small-size-100">
    <v-popover
      offset="8"
      placement="left"
    >
      <md-button>On left</md-button>

      <template slot="popover">
        <h3 class="popover-header">Popover on left</h3>
        <div class="popover-body">Here will be some very useful information about his popover. Here will be some very useful information about his popover.</div>
      </template>
    </v-popover>
  </div>
  <div class="md-layout-item md-size-15 md-small-size-100">
    <v-popover
      offset="8"
      placement="right"
    >
      <md-button>On right</md-button>

      <template slot="popover">
        <h3 class="popover-header">Popover on right</h3>
        <div class="popover-body">Here will be some very useful information about his popover. Here will be some very useful information about his popover.</div>
      </template>
    </v-popover>
  </div>
  <div class="md-layout-item md-size-15 md-small-size-100">
    <v-popover
      offset="8"
      placement="top"
    >
      <md-button>On top</md-button>

      <template slot="popover">
        <h3 class="popover-header">Popover on top</h3>
        <div class="popover-body">Here will be some very useful information about his popover. Here will be some very useful information about his popover.</div>
      </template>
    </v-popover>
  </div>
  <div class="md-layout-item md-size-15 md-small-size-100">
    <v-popover
      offset="8"
      placement="bottom"
    >
      <md-button class="md-block">On bottom</md-button>

      <template slot="popover">
        <h3 class="popover-header">Popover on bottom</h3>
        <div class="popover-body">Here will be some very useful information about his popover. Here will be some very useful information about his popover.</div>
      </template>
    </v-popover>
  </div>
</div>

← Carousel →