React Tooltip Component

Documentation and examples for adding React Tooltips.

Examples#

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 keffiyeh
3 <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 apparel
8 <CTooltip content="Tooltip text">
9 <CLink> have a </CLink>
10 </CTooltip>
11 terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu
12 biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic
13 artisan
14 <CTooltip content="Tooltip text">
15 <CLink> whatever keytar </CLink>
16 </CTooltip>
17 scenester farm-to-table banksy Austin
18 <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<CTooltip
2 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
3 placement="top"
4 >
5 <CButton color="secondary">Tooltip on top</CButton>
6 </CTooltip>
7 <CTooltip
8 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
9 placement="right"
10 >
11 <CButton color="secondary">Tooltip on right</CButton>
12 </CTooltip>
13 <CTooltip
14 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
15 placement="bottom"
16 >
17 <CButton color="secondary">Tooltip on bottom</CButton>
18 </CTooltip>
19 <CTooltip
20 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
21 placement="left"
22 >
23 <CButton color="secondary">Tooltip on left</CButton>
24 </CTooltip>

API#

CTooltip#

1import { CTooltip } from '@coreui/react'
2// or
3import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
PropertyDescriptionTypeDefault
contentContent node for your component.ReactNode-
onHideCallback fired when the component requests to be hidden.() => void-
onShowCallback fired when the component requests to be shown.() => void-
placementDescribes 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
triggerSets 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
visibleToggle the visibility of popover component.boolean-