Version: v6

Styling

How to customize tooltip styles in ReactTooltip styles.

The tooltip arrow inherits its background color from the tooltip (its parent).

Inline Styling

You can add styles to the tooltip with inline styling.

import { Tooltip } from 'react-tooltip'

<a
  data-tooltip-id="my-tooltip-inline"
  data-tooltip-content="Hello world!"
>
  ◕‿‿◕
</a>
<Tooltip
  id="my-tooltip-inline"
  style={{ backgroundColor: "rgb(0, 255, 30)", color: "#222" }}
/>

◕‿‿◕

Classes

You don't need to use !important to override the styles, take advantage of CSS Specificity instead (MDN Docs | W3c Docs).

Using CSS Specificity you can add a class with more specificity than the default used in tooltip so you can override or add new rules to the component style.

import { Tooltip } from 'react-tooltip'

<style>
.example {
  color: #222;
  background-color: rgb(0, 247, 255);
}
</style>

<div className="example-container">
  <a
    data-tooltip-id="my-tooltip-styles"
    data-tooltip-content="Hello world!"
  >
    ◕‿‿◕
  </a>
  <Tooltip id="my-tooltip-styles" className="example" />
</div>

◕‿‿◕

Explanation

info

Please note that Core styles are different from Base styles, for more information, please check the Disabling ReactTooltip CSS section.

Base styles

In this example, we are adding an extra level to the CSS classes. The following are the default base styles for the tooltip:

.tooltip {
  border-radius: 3px;
  font-size: 90%;
  width: max-content;
}

.content {
  background: inherit;
  border-radius: inherit;
  padding: 8px 16px;
}

.arrow {
  width: var(--rt-arrow-size);
  height: var(--rt-arrow-size);
}

[class*='react-tooltip__place-top'] > .arrow {
  transform: rotate(45deg);
}

[class*='react-tooltip__place-right'] > .arrow {
  transform: rotate(135deg);
}

[class*='react-tooltip__place-bottom'] > .arrow {
  transform: rotate(225deg);
}

[class*='react-tooltip__place-left'] > .arrow {
  transform: rotate(315deg);
}

/** Types variant **/
.dark {
  background: var(--rt-color-dark);
  color: var(--rt-color-white);
}

.light {
  background-color: var(--rt-color-white);
  color: var(--rt-color-dark);
}

.success {
  background-color: var(--rt-color-success);
  color: var(--rt-color-white);
}

.warning {
  background-color: var(--rt-color-warning);
  color: var(--rt-color-white);
}

.error {
  background-color: var(--rt-color-error);
  color: var(--rt-color-white);
}

.info {
  background-color: var(--rt-color-info);
  color: var(--rt-color-white);
}

Core styles

And the following are the core styles for the tooltip:

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
}

.fixed {
  position: fixed;
}

.arrow {
  position: absolute;
  background: inherit;
  z-index: -1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.content {
  position: relative;
  z-index: 1;
}

.noArrow {
  display: none;
}

.clickable {
  pointer-events: auto;
}

.show {
  opacity: var(--rt-opacity);
  transition: opacity var(--rt-transition-show-delay) ease-out;
  will-change: opacity;
}

.closing {
  opacity: 0;
  transition: opacity var(--rt-transition-closing-delay) ease-in;
  will-change: opacity;
}

/** end - core styles **/

If we only add new classes like below, it will not work because it has the same level of specificity as the default dark variant.

.example {
  color: #222;
  background-color: rgb(0, 247, 255);
}

/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/
.example .example-arrow {
  background-color: rgb(255, 0, 0);
}

To make this work as expected, we need to add another level of specificity:

.some-class-or-rule .example {
  color: #222;
  background-color: rgb(0, 247, 255);
}

/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/
.some-class-or-rule .example .example-arrow {
  background-color: rgb(255, 0, 0);
}

Changing colors

Orange

import { Tooltip } from 'react-tooltip'

<style>
.example-container .example-orange {
  color: #222;
  background-color: rgb(255, 153, 0);
}
</style>

<div className="example-container">
  <a data-tooltip-id="my-tooltip-orange" data-tooltip-content="Hello world!">
    ◕‿‿◕
  </a>
  <Tooltip id="my-tooltip-orange" className="example-orange" />
</div>

◕‿‿◕

Pink

import { Tooltip } from 'react-tooltip'

<style>
.example-container .example-pink {
  color: #fff;
  background-color: rgb(255, 0, 255);
}
</style>

<div className="example-container">
  <a data-tooltip-id="my-tooltip-pink" data-tooltip-content="Hello world!">
    ◕‿‿◕
  </a>
  <Tooltip id="my-tooltip-pink" className="example-pink" />
</div>

◕‿‿◕

info

This is for demonstration purposes only. Using arrowColor instead is recommended.

<Tooltip arrowColor="red" />

import { Tooltip } from 'react-tooltip'

<style>
.example-container .example-diff-arrow {
  color: #fff;
  background-color: rgb(55, 55, 55);
}

.example-container .example-diff-arrow .example-arrow {
  background-color: rgb(222, 34, 72);
}
</style>

<div className="example-container">
  <a data-tooltip-id="my-tooltip-diff" data-tooltip-content="Hello world!">
    ◕‿‿◕
  </a>
  <Tooltip id="my-tooltip-diff" className="example-diff-arrow" classNameArrow="example-arrow" />
</div>

◕‿‿◕

Changing the opacity

Setting the opacity through CSS directly on the tooltip element breaks functionality. Use the opacity prop, or override the --rt-opacity CSS variable instead.

import { Tooltip } from 'react-tooltip'

<div className="example-container">
  <a data-tooltip-id="my-tooltip-opacity" data-tooltip-content="Hello world!">
    ◕‿‿◕
  </a>
  <Tooltip id="my-tooltip-opacity" opacity={0.3} />
</div>

/* To be used instead of the `opacity` prop, not required otherwise */
:root {
  --rt-opacity: 0.3;
}

◕‿‿◕

Changing the border radius

Removing radius

import { Tooltip } from 'react-tooltip'

<style>
.example-container .example-no-radius {
  border-radius: 0;
}
</style>

<div className="example-container">
  <a data-tooltip-id="my-tooltip-no-radius" data-tooltip-content="Hello world!">
    ◕‿‿◕
  </a>
  <Tooltip id="my-tooltip-no-radius" className="example-no-radius" />
</div>

◕‿‿◕

Rounded

import { Tooltip } from 'react-tooltip'

<style>
.example-container .example-rounded {
  border-radius: 50%;
}
</style>

<div className="example-container">
  <a data-tooltip-id="my-tooltip-rounded" data-tooltip-content="Hello world!">
    ◕‿‿◕
  </a>
  <Tooltip id="my-tooltip-rounded" className="example-rounded" />
</div>

◕‿‿◕

Changing the padding

Removing padding

import { Tooltip } from 'react-tooltip'

<style>
.example-container .example-no-padding {
  padding: 0;
}
</style>

<div className="example-container">
  <a data-tooltip-id="my-tooltip-no-padding" data-tooltip-content="Hello world!">
    ◕‿‿◕
  </a>
  <Tooltip id="my-tooltip-no-padding" className="example-no-padding" />
</div>

◕‿‿◕

Adding more padding

import { Tooltip } from 'react-tooltip'

<style>
.example-container .example-padding {
  padding: 48px;
}
</style>

<div className="example-container">
  <a data-tooltip-id="my-tooltip-padding" data-tooltip-content="Hello world!">
    ◕‿‿◕
  </a>
  <Tooltip id="my-tooltip-padding" className="example-padding" />
</div>

◕‿‿◕

Changing the border

If you're using the tooltip with the arrow, setting a border through CSS will not work for the arrow.

We recommend using the border prop to avoid that.

import { Tooltip } from 'react-tooltip'

<div className="example-container">
  <a data-tooltip-id="my-tooltip-border" data-tooltip-content="Hello world!">
    ◕‿‿◕
  </a>
  <Tooltip id="my-tooltip-border" border="1px solid red" />
</div>

◕‿‿◕

info

In summary, if you do it correctly you can use CSS specificity instead of !important.

Customizing opening/closing animation

By default, the tooltip has a fade-in/fade-out transition when opening/closing, with a delay of 150ms for both. If you wish to change the delay for any of them, override the following CSS variables:

:root {
  --rt-transition-show-delay: 0.15s;
  --rt-transition-closing-delay: 0.15s;
}

Disabling ReactTooltip CSS

ReactTooltip works seamlessly by automatically injecting CSS into your application. To disable this functionality, use the tooltip prop disableStyleInjection. Details on how it works:

Set to true: what we call "base" styles will be disabled. Useful if you wish to style your tooltip from scratch.
Set to 'core': both the "base" and the "core" styles will be disabled. This means the tooltip will not work properly without adding specific CSS attributes to it.

In both cases, you can add import 'react-tooltip/dist/react-tooltip.css' to your project to get the tooltip working again, or add your own custom CSS.

caution

Do not set disableStyleInjection dynamically. Changing its value requires a page refresh, so that will not work.

info

Check out more details about the base and core styles.

Environment variables

danger

Removed in v6. Use disableStyleInjection instead.

The REACT_TOOLTIP_DISABLE_CORE_STYLES and REACT_TOOLTIP_DISABLE_BASE_STYLES environment variables are no longer supported.

`removeStyle()` function

danger

Removed in v6. Use disableStyleInjection instead.

The removeStyle() function is no longer exported.

Inline Styling​

Classes​

Explanation​

Base styles​

Core styles​

Changing colors​

Orange​

Pink​

Tooltip Arrow with a different color from Tooltip​

Changing the opacity​

Changing the border radius​

Removing radius​

Rounded​

Changing the padding​

Removing padding​

Adding more padding​

Changing the border​

Customizing opening/closing animation​

Disabling ReactTooltip CSS​

Environment variables​

removeStyle() function​

Inline Styling

Classes

Explanation

Base styles

Core styles

Changing colors

Orange

Pink

Tooltip Arrow with a different color from Tooltip

Changing the opacity

Changing the border radius

Removing radius

Rounded

Changing the padding

Removing padding

Adding more padding

Changing the border

Customizing opening/closing animation

Disabling ReactTooltip CSS

Environment variables

`removeStyle()` function