CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
You can support our Open Source software development in the following ways:
Documentation and examples for adding React popovers, like those found in iOS, to any element on your site.
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
1<CPopover2 title="Popover title"3 content="And here’s some amazing content. It’s very engaging. Right?"4 placement="right"5>6 <CButton color="danger" size="lg">7 Click to toggle popover8 </CButton>9</CPopover>
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI for React in RTL.
1<CPopover2 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."3 placement="top"4 >5 <CButton color="secondary">Popover on top</CButton>6 </CPopover>7 <CPopover8 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."9 placement="right"10 >11 <CButton color="secondary">Popover on right</CButton>12 </CPopover>13 <CPopover14 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."15 placement="bottom"16 >17 <CButton color="secondary">Popover on bottom</CButton>18 </CPopover>19 <CPopover20 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."21 placement="left"22 >23 <CButton color="secondary">Popover on left</CButton>24 </CPopover>
React 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.
1--cui-popover-zindex: #{$zindex-popover};2--cui-popover-max-width: #{$popover-max-width};3--cui-popover-font-size: {$popover-font-size};4--cui-popover-bg: #{$popover-bg};5--cui-popover-border-width: #{$popover-border-width};6--cui-popover-border-color: #{$popover-border-color};7--cui-popover-border-radius: #{$popover-border-radius};8--cui-popover-inner-border-radius: #{$popover-inner-border-radius};9--cui-popover-box-shadow: #{$popover-box-shadow};10--cui-popover-header-padding-x: #{$popover-header-padding-x};11--cui-popover-header-padding-y: #{$popover-header-padding-y};12--cui-popover-header-font-size: {$popover-header-font-size};13--cui-popover-header-color: #{$popover-header-color};14--cui-popover-header-bg: #{$popover-header-bg};15--cui-popover-body-padding-x: #{$popover-body-padding-x};16--cui-popover-body-padding-y: #{$popover-body-padding-y};17--cui-popover-body-color: #{$popover-body-color};18--cui-popover-arrow-width: #{$popover-arrow-width};19--cui-popover-arrow-height: #{$popover-arrow-height};20--cui-popover-arrow-border: var(--cui-popover-border-color);
1const vars = {2 '--my-css-var': 10,3 '--my-another-css-var': "red"4}5return <CPopover style={vars}>...</CPopover>
1$popover-font-size: $font-size-sm;2$popover-bg: $white;3$popover-max-width: 276px;4$popover-border-width: $border-width;5$popover-border-color: var(--cui-border-color-translucent);6$popover-border-radius: $border-radius-lg;7$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width);8$popover-box-shadow: $box-shadow;910$popover-header-font-size: $font-size-base;11$popover-header-bg: shade-color($popover-bg, 6%);12$popover-header-color: var(--cui-heading-color);13$popover-header-padding-y: .5rem;14$popover-header-padding-x: $spacer;1516$popover-body-color: $body-color;17$popover-body-padding-y: $spacer;18$popover-body-padding-x: $spacer;1920$popover-arrow-width: 1rem;21$popover-arrow-height: .5rem;
1import { CPopover } from '@coreui/react'2// or3import CPopover from '@coreui/react/src/components/popover/CPopover'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
content | Content node for your component. | ReactNode | - |
offset | Offset of the popover relative to its target. | [number, number] | [0, 8] |
onHide | Callback fired when the component requests to be hidden. | () => void | - |
onShow | Callback fired when the component requests to be shown. | () => void | - |
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. | 'auto' | 'top' | 'right' | 'bottom' | 'left' | top |
title | Title node for your component. | ReactNode | - |
trigger | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | 'hover' | 'focus' | 'click' | click |
visible | Toggle the visibility of popover component. | boolean | - |