• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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.

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error