---
title: React Tooltip Component
name: Tooltip
description: Documentation and examples for adding React Tooltips.
menu: Components
route: /components/tooltip
other_frameworks: tooltip
---

import { CTooltip, CButton, CLink } from '@coreui/react/src/index'

## Examples

### Tooltips on links

Hover over the links below to see tooltips:

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


```jsx
<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](#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables.

export const CustomTooltipsExample = () => {
  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>
  )
}

<Example>
  <CustomTooltipsExample />
</Example>
```jsx
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.

<Example>
  <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>
</Example>

```jsx
<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"`.

<Example>
  <CTooltip
    content="Disabled tooltip"
    trigger={['hover', 'focus']}
  >
    <span className="d-inline-block" tabIndex={0}>
      <CButton color="primary" disabled>Disabled button</CButton>
    </span>
  </CTooltip>
</Example>
```jsx
<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.

<ScssDocs file="_tooltip.scss" capture="tooltip-css-vars"/>

#### How to use CSS variables

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

### SASS variables

<ScssDocs file="_variables.scss" capture="tooltip-variables"/>

## API

### CTooltip

`markdown:CTooltip.api.mdx`
