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>
In summary, if you do it correctly you can use CSS specificity instead of !important
.