I am trying to use react-tooltip library to add tooltips functionality to my application. The problem I have encountered is that passing className
or class
prop does not result in class
property added to the corresponding div
element. After quite some time studying the library code and debugging I still have no idea why it is not being added. Seems like a bug in the library (I have posted a bug report here), but I am not ruling out the possibility of me overlooking something, therefore posting here as well.
Version of react-tooltip: 4.2.21
React code:
// App.js
useEffect(() => {
ReactTooltip.rebuild()
}, [])
// MyTooltip.js
import ReactTooltip from "react-tooltip";
import ReactDOM from "react-dom";
import React from "react";
import classes from './MyTooltip.module.css';
const MyTooltip = (props) =>
<React.Fragment>
{
ReactDOM.createPortal(
<div>
<div className={classes.backdrop} />
<ReactTooltip
id={props.id}
type="dark"
place={props.place}
className={classes.tooltip}
>
<span>{props.text}</span>
</ReactTooltip>
</div>
,
document.getElementById("tooltip")
)}
</React.Fragment>
export default MyTooltip;
HTML generated: <div class="__react_component_tooltip t724ff40a-5699-4bf1-9fd7-7295f4f8e414 place-bottom type-dark" data-id="tooltip"><span>Test tooltip</span></div>
Thanks in advance for any tips that would help to resolve this problem.