# 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
Popover on left
Here will be some very useful information about
his popover. Here will be some very useful
information about his popover.
Popover on right
Here will be some very useful information about
his popover. Here will be some very useful
information about his popover.
Popover on top
Here will be some very useful information about
his popover. Here will be some very useful
information about his popover.
Popover on bottom
Here will be some very useful information about
his popover. Here will be some very useful
information about his popover.
<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>
Show