Recharts CustomTooltip loses background opacity

user_11296273 0
Viewed 187

I first came across this when implementing my own CustomTooltip, but I think this might actually be a recharts bug, as even the codesandbox example from the documentation site has the same issue. If you remove 'content={< CustomTooltip />}' from line 110 on that codesandbox, you'll turn the tooltip into a basic one, which will look like this:

enter image description here

But when you put that piece back in so that it's what the documentation has as an example for a CustomTooltip, the background (for lack of a better term) of the tooltip disappears.

enter image description here

Does anyone know if this is a recharts bug, or maybe I'm just doing something wrong? I just want to get my Custom Tooltip to have the same visual look as the basic one

recharts reactjs
2 Answers

I figured it out. As rahuuzz said, providing custom content for the tooltip also overrides the base styling, so that has to be provided. My tooltip in my chart now looks like this:

<Tooltip 
    content={<CustomTooltip />}
    wrapperStyle={{ backgroundColor: "white", borderStyle: "ridge", paddingLeft: "10px", paddingRight: "10px" }}
/>

Basically just had to add the wrappedStyle prop with some basic styling. Hopefully this helps someone else googling in the future

user_112962730

In your codesandbox you are importing styles.css but It doesnt contain any styles for custom-tooltip class.

When you provide custom content for the tooltip you have to define the styles yourself. When content prop is omitted, the package sets the style internally to the tooltip.

user_87053430
Related