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 Tooltips.
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
Hover over the links below to see tooltips:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic artisan whatever keytar scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
1<p className="text-medium-emphasis">2 Tight pants next level keffiyeh3 <CTooltip content="Tooltip text">4 <CLink> you probably </CLink>5 </CTooltip>6 haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.7 Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel8 <CTooltip content="Tooltip text">9 <CLink> have a </CLink>10 </CTooltip>11 terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu12 biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic13 artisan14 <CTooltip content="Tooltip text">15 <CLink> whatever keytar </CLink>16 </CTooltip>17 scenester farm-to-table banksy Austin18 <CTooltip content="Tooltip text">19 <CLink> twitter handle </CLink>20 </CTooltip>21 freegan cred raw denim single-origin coffee viral.22</p>
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.
1<CTooltip2 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."3 placement="top"4 >5 <CButton color="secondary">Tooltip on top</CButton>6 </CTooltip>7 <CTooltip8 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."9 placement="right"10 >11 <CButton color="secondary">Tooltip on right</CButton>12 </CTooltip>13 <CTooltip14 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."15 placement="bottom"16 >17 <CButton color="secondary">Tooltip on bottom</CButton>18 </CTooltip>19 <CTooltip20 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."21 placement="left"22 >23 <CButton color="secondary">Tooltip on left</CButton>24 </CTooltip>
React toltips use local CSS variables on .tooltip
for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
1--cui-tooltip-zindex: #{$zindex-tooltip};2--cui-tooltip-max-width: #{$tooltip-max-width};3--cui-tooltip-padding-x: #{$tooltip-padding-x};4--cui-tooltip-padding-y: #{$tooltip-padding-y};5--cui-tooltip-margin: #{$tooltip-margin};6--cui-tooltip-font-size: #{$tooltip-font-size};7--cui-tooltip-color: #{$tooltip-color};8--cui-tooltip-bg: #{$tooltip-bg};9--cui-tooltip-border-radius: #{$tooltip-border-radius};10--cui-tooltip-opacity: #{$tooltip-opacity};11--cui-tooltip-arrow-width: #{$tooltip-arrow-width};12--cui-tooltip-arrow-height: #{$tooltip-arrow-height};
1const vars = {2 '--my-css-var': 10,3 '--my-another-css-var': "red"4}5return <CTooltip style={vars}>...</CTooltip>
1$tooltip-font-size: $font-size-sm;2$tooltip-max-width: 200px;3$tooltip-color: $high-emphasis-inverse;4$tooltip-bg: $black;5$tooltip-border-radius: $border-radius;6$tooltip-opacity: .9;7$tooltip-padding-y: $spacer * .25;8$tooltip-padding-x: $spacer * .5;9$tooltip-margin: null;1011$tooltip-arrow-width: .8rem;12$tooltip-arrow-height: .4rem;13$tooltip-arrow-color: null;
1import { CTooltip } from '@coreui/react'2// or3import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
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, 0] |
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 |
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' | hover |
visible | Toggle the visibility of popover component. | boolean | - |