Bootstrap Vue Popover Component and Directive
Documentation and examples for adding Bootstrap Vue popovers, like those found in iOS, to any element on your site.
On this page
Example
Component
<CPopover title="Popover title" content="And here\’s some amazing content. It’s very engaging. Right?" placement="right">
<template #toggler="{ on }">
<CButton color="danger" size="lg" v-on="on">Click to toggle popover</CButton>
</template>
</CPopover>
1
2
3
4
5
2
3
4
5
Directive
<CButton color="danger" size="lg" v-c-popover="{header: 'Popover title', content: 'And here\’s some amazing content. It’s very engaging. Right?', placement: 'right'}">Click to toggle popover</CButton>
1
Four directions
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap Vue in RTL.
Component
<CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="top">
<template #toggler="{ on }">
<CButton color="secondary" v-on="on">Popover on top</CButton>
</template>
</CPopover>
<CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="right">
<template #toggler="{ on }">
<CButton color="secondary" v-on="on">Popover on right</CButton>
</template>
</CPopover>
<CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="bottom">
<template #toggler="{ on }">
<CButton color="secondary" v-on="on">Popover on bottom</CButton>
</template>
</CPopover>
<CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="left">
<template #toggler="{ on }">
<CButton color="secondary" v-on="on">Popover on left</CButton>
</template>
</CPopover>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Directive
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Popover on top</CButton>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Popover on right</CButton>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Popover on bottom</CButton>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Popover on left</CButton>
1
2
3
4
2
3
4
API
CPopover
import { CPopover } from '@coreui/bootstrap-vue'
// or
import CPopover from '@coreui/bootstrap-vue/src/components/popover/CPopover'
1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| content | Content for your component. If you want to pass non-string value please use dedicated slot <template #content>...</template> | string | - | - |
| offset | Offset of the popover relative to its target. | array | - | [0, 8] |
| placement | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement | - | 'top' |
| title | Title for your component. If you want to pass non-string value please use dedicated slot <template #title>...</template> | string | - | - |
| trigger | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | string | string[] | 'click', 'focus', 'hover' | 'click' |
| visible | Toggle the visibility of popover component. | boolean | - |
Events
| Event name | Description | Properties |
|---|---|---|
| hide | Callback fired when the component requests to be hidden. | |
| show | Callback fired when the component requests to be shown. |