Adding className or class prop does not result in adding its value to the class property of tooltip div

[altern]

Version: 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}
            //overridePosition={props.overridePosition}
            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>

[stevenKirill]

it seems you are using this component wrong, I checked it and it added my css modules class. You should add data-tip attribute to the dom node you are trying to render to your component, maybe its not working because you are using portals.

        <ReactTooltip
            id="100200300"
            type="dark"
            place="top"
            className={classes.tooltip}
        >
            <span>simple text</span>
        </ReactTooltip>
        <div data-for="100200300" data-tip="100200300_1">hello world</div>

I got this html l noticed one thing that you should add !important to your css properties then it will work

[sgehrman]

yes, you need !important