Bootstrap React Tooltip

Documentation and examples for adding Bootstrap React Tooltips.

On this page

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 Bootstrap React 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/bootstrap-react'
2// or
3import CTooltip from '@coreui/bootstrap-react/src/components/tooltip/CTooltip'

Property	Description	Type	Default
content	Content node for your component.	`ReactNode`	-
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`	-