BootstrapVue Popovers

Our BootstrapVue popovers are a small overlay of content that is used to demonstrate secondary information of any component when it is clicked by a user. For example, you can think about those from iOS’s devices. Now keep reading some examples to see how BootstrapVue popovers work.

Example

<b-button variant="default" v-b-popover.hover.top="'This is a very beautiful popover, show some love.'">
  Popover on top
</b-button>

<b-button variant="default" v-b-popover.hover.right="'This is a very beautiful popover, show some love.'">
  Popover on right
</b-button>

<b-button variant="default" v-b-popover.hover.bottom="'This is a very beautiful popover, show some love.'">
  Popover on bottom
</b-button>

<b-button variant="default" v-b-popover.hover.left="'This is a very beautiful popover, show some love.'">
  Popover on left
</b-button>

Variations

<b-button variant="default" id="popover-button-variant-default" href="#" tabindex="0">Default popover</b-button>
<b-popover target="popover-button-variant-default" variant="default" triggers="focus" placement="top">
  This is a very beautiful popover, show some love.
</b-popover>

<b-button variant="primary" id="popover-button-variant-primary" href="#" tabindex="0">Primary popover</b-button>
<b-popover target="popover-button-variant-primary" variant="primary" triggers="focus" placement="top">
  This is a very beautiful popover, show some love.
</b-popover>

<b-button variant="secondary" id="popover-button-variant-secondary" href="#" tabindex="0">Secondary popover</b-button>
<b-popover target="popover-button-variant-secondary" variant="secondary" triggers="focus" placement="top">
  This is a very beautiful popover, show some love.
</b-popover>

<b-button variant="info" id="popover-button-variant-info" href="#" tabindex="0">Info popover</b-button>
<b-popover target="popover-button-variant-info" variant="info" triggers="focus" placement="top">
  This is a very beautiful popover, show some love.
</b-popover>

<b-button variant="success" id="popover-button-variant-success" href="#" tabindex="0">Success popover</b-button>
<b-popover target="popover-button-variant-success" variant="success" triggers="focus" placement="top">
  This is a very beautiful popover, show some love.
</b-popover>

<b-button variant="danger" id="popover-button-variant-danger" href="#" tabindex="0">Danger popover</b-button>
<b-popover target="popover-button-variant-danger" variant="danger" triggers="focus" placement="top">
  This is a very beautiful popover, show some love.
</b-popover>

<b-button variant="warning" id="popover-button-variant-warning" href="#" tabindex="0">Warning popover</b-button>
<b-popover target="popover-button-variant-warning" variant="warning" triggers="focus" placement="top">
  This is a very beautiful popover, show some love.
</b-popover>

If you want to see more examples and properties please check the official BootstrapVue Documentation.