Styling

How to customize tooltip styles in ReactTooltip styles.

Tooltip arrow inherits its background color from tooltip (its parent).

Inline Styling

You can add styles into the tooltip with inline styling.

import { Tooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'

<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'
import 'react-tooltip/dist/react-tooltip.css'

<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

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

.tooltip {
  visibility: hidden;
  width: max-content;
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 16px;
  border-radius: 3px;
  font-size: 90%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  will-change: opacity, visibility;
}

.fixed {
  position: fixed;
}

.arrow {
  position: absolute;
  background: inherit;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}

.no-arrow {
  display: none;
}

.clickable {
  pointer-events: auto;
}

.show {
  visibility: visible;
  opacity: var(--rt-opacity);
}

/** 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);
}

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

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

/** add next line only if you want to have tooltip arrow with a different background color from 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 tooltip arrow with a different background color from tooltip **/
.some-class-or-rule .example .example-arrow {
  background-color: rgb(255, 0, 0);
}

---

Changing colors

Orange

import { Tooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'

<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'
import 'react-tooltip/dist/react-tooltip.css'

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

◕‿‿◕

Tooltip Arrow with a different color from Tooltip

import { Tooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'

<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 border radius

Removing radius

import { Tooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'

<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'
import 'react-tooltip/dist/react-tooltip.css'

<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'
import 'react-tooltip/dist/react-tooltip.css'

<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'
import 'react-tooltip/dist/react-tooltip.css'

<style>
.example-container .example-padding {
  border-radius: 50%;
}
</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>

◕‿‿◕

---

info

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