React Tooltip Component

Tooltip

Documentation and examples for adding React Tooltips.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

On this page

Examples#

Tooltips on links#

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.

<p className="text-body-secondary">
  Tight pants next level keffiyeh
  <CTooltip content="Tooltip text">
    <CLink> you probably </CLink>
  </CTooltip>
  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
  <CTooltip content="Tooltip text">
    <CLink> have a </CLink>
  </CTooltip>
  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
  <CTooltip content="Tooltip text">
    <CLink> whatever keytar </CLink>
  </CTooltip>
  scenester farm-to-table banksy Austin
  <CTooltip content="Tooltip text">
    <CLink> twitter handle </CLink>
  </CTooltip>
  freegan cred raw denim single-origin coffee viral.
</p>

Custom tooltips#

You can customize the appearance of tooltips using CSS variables. We set a custom style to scope our custom appearance and use it to override some of the local CSS variables.

const customTooltipStyle = {
  '--cui-tooltip-bg': 'var(--cui-primary)',
}
return (
  <CTooltip
    content="This top tooltip is themed via CSS variables."
    placement="top"
    style={customTooltipStyle}
  >
    <CButton color="secondary">Custom tooltip</CButton>
  </CTooltip>
)

Directions#

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.

<CTooltip
  content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
  placement="top"
>
  <CButton color="secondary">Tooltip on top</CButton>
</CTooltip>
<CTooltip
  content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
  placement="right"
>
  <CButton color="secondary">Tooltip on right</CButton>
</CTooltip>
<CTooltip
  content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
  placement="bottom"
>
  <CButton color="secondary">Tooltip on bottom</CButton>
</CTooltip>
<CTooltip
  content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
  placement="left"
>
  <CButton color="secondary">Tooltip on left</CButton>
</CTooltip>

Usage#

Disabled elements#

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0".

<CTooltip
  content="Disabled tooltip"
  trigger={['hover', 'focus']}
>
  <span className="d-inline-block" tabIndex={0}>
    <CButton color="primary" disabled>Disabled button</CButton>
  </span>
</CTooltip>

Customizing#

CSS variables#

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.

--cui-tooltip-zindex: #{$zindex-tooltip};
--cui-tooltip-max-width: #{$tooltip-max-width};
--cui-tooltip-padding-x: #{$tooltip-padding-x};
--cui-tooltip-padding-y: #{$tooltip-padding-y};
--cui-tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --cui-tooltip-font-size);
--cui-tooltip-color: #{$tooltip-color};
--cui-tooltip-bg: #{$tooltip-bg};
--cui-tooltip-border-radius: #{$tooltip-border-radius};
--cui-tooltip-opacity: #{$tooltip-opacity};
--cui-tooltip-arrow-width: #{$tooltip-arrow-width};
--cui-tooltip-arrow-height: #{$tooltip-arrow-height};

How to use CSS variables#

const vars = { 
  '--my-css-var': 10,
  '--my-another-css-var': "red" 
}
return <CTooltip style={vars}>...</CTooltip>

SASS variables#

$tooltip-font-size:                 $font-size-sm !default;
$tooltip-max-width:                 200px !default;
$tooltip-color:                     var(--cui-body-bg) !default;
$tooltip-bg:                        var(--cui-emphasis-color) !default;
$tooltip-border-radius:             var(--cui-border-radius) !default;
$tooltip-opacity:                   .9 !default;
$tooltip-padding-y:                 $spacer * .25 !default;
$tooltip-padding-x:                 $spacer * .5 !default;
$tooltip-margin:                    null !default; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem !default;
$tooltip-arrow-height:              .4rem !default;
// fusv-disable
$tooltip-arrow-color:               null !default; // Deprecated in 4.2.0 for CSS variables
// fusv-enable

API#

CTooltip#

import { CTooltip } from '@coreui/react'
// or
import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'

Property	Description	Type	Default
animation 4.9.0+	Apply a CSS fade transition to the tooltip.	`boolean`	true
className	A string of all className you want applied to the component.	`string`	-
container 4.11.0+	Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.	`Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)`	-
content	Content node for your component.	`ReactNode`	-
delay 4.9.0+	The delay for displaying and hiding the tooltip (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
fallbackPlacements 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 tooltip relative to its target.	`[number, number]`	[0, 6]
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'` \| `'bottom'` \| `'right'` \| `'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', 'focus']
visible	Toggle the visibility of tooltip component.	`boolean`	-