Vue Popover Component and Directive
Documentation and examples for adding Vue popovers, like those found in iOS, to any element on your site.
Other frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.
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>
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>
Four directions
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI for 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>
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>
Custom popovers
You can customize the appearance of popovers using CSS variables. We set a custom style
to scope our custom appearance and use it to override some of the local CSS variables.
<template>
<CPopover
content="This popover is themed via CSS variables."
placement="right"
title="Custom popover"
:style="customPopoverStyle"
>
<template #toggler="{ on }">
<CButton color="secondary" v-on="on">Custom popover</CButton>
</template>
</CPopover>
</template>
<script>
export default {
data() {
return {
customPopoverStyle: {
'--cui-popover-max-width': '200px',
'--cui-popover-border-color': 'var(--cui-primary)',
'--cui-popover-header-bg': 'var(--cui-primary)',
'--cui-popover-header-color': 'var(--cui-white)',
'--cui-popover-body-padding-x': '1rem',
'--cui-popover-body-padding-y': '.5rem',
}
}
}
}
</script>
Usage
Disabled elements
Elements with the disabled attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper <div>
or <span>
, ideally made keyboard-focusable using tabindex="0"
.
For disabled popover triggers, you may also prefer :trigger="['hover', 'focus']"
so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.
<CPopover
content="Disabled popover"
placement="right"
:trigger="['hover', 'focus']"
>
<template #toggler="{ on }">
<span class="d-inline-block" :tabindex="0" v-on="on">
<CButton color="primary" disabled>Disabled button</CButton>
</span>
</template>
</CPopover>
Customizing
CSS variables
Vue popovers use local CSS variables on .popover
for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--cui-popover-zindex: #{$zindex-popover};
--cui-popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --cui-popover-font-size);
--cui-popover-bg: #{$popover-bg};
--cui-popover-border-width: #{$popover-border-width};
--cui-popover-border-color: #{$popover-border-color};
--cui-popover-border-radius: #{$popover-border-radius};
--cui-popover-inner-border-radius: #{$popover-inner-border-radius};
--cui-popover-box-shadow: #{$popover-box-shadow};
--cui-popover-header-padding-x: #{$popover-header-padding-x};
--cui-popover-header-padding-y: #{$popover-header-padding-y};
@include rfs($popover-header-font-size, --cui-popover-header-font-size);
--cui-popover-header-color: #{$popover-header-color};
--cui-popover-header-bg: #{$popover-header-bg};
--cui-popover-body-padding-x: #{$popover-body-padding-x};
--cui-popover-body-padding-y: #{$popover-body-padding-y};
--cui-popover-body-color: #{$popover-body-color};
--cui-popover-arrow-width: #{$popover-arrow-width};
--cui-popover-arrow-height: #{$popover-arrow-height};
--cui-popover-arrow-border: var(--cui-popover-border-color);
How to use CSS variables
const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}
return <CPopover :style="vars">...</CPopover>
SASS variables
$popover-font-size: $font-size-sm !default;
$popover-bg: $white !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: var(--cui-border-color-translucent) !default;
$popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: $box-shadow !default;
$popover-header-font-size: $font-size-base !default;
$popover-header-bg: shade-color($popover-bg, 6%) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: $spacer !default;
$popover-body-color: $body-color !default;
$popover-body-padding-y: $spacer !default;
$popover-body-padding-x: $spacer !default;
$popover-arrow-width: 1rem !default;
$popover-arrow-height: .5rem !default;
API
CPopover
import { CPopover } from '@coreui/vue'
// or
import CPopover from '@coreui/vue/src/components/popover/CPopover'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
animation 4.9.0+ | Apply a CSS fade transition to the popover. | boolean | - | true |
content | Content for your component. If you want to pass non-string value please use dedicated slot <template #content>...</template> | string | - | - |
delay 4.9.0+ | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: { 'show': 500, 'hide': 100 } . | number | { show: number; hide: number } | - | 0 |
fallback-placements 4.9.0+ | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | Placements | Placements[] | - | () => ['top', 'right', 'bottom', 'left'] |
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. | Triggers | Triggers[] | '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. |