Kendo UI progress bar inside react-tooltip not working

Question

I have a simple div which uses react-tooltip Inside the tooltip I am trying to render kendo progress bar but it doesn't seem to be working, the bar is shown but the progress is not shown

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip as ReactTooltip } from 'react-tooltip'
import { ProgressBar } from '@progress/kendo-react-progressbars';


const App = () => {
 
  const TooltipContentTemplate = () => {

    return <div>
       <ProgressBar value={20} labelVisible={false}/>
        </div>
  };

  return (
    <div className="container">
      <div className="row mb-4" id="1"
       data-tooltip-html={ReactDOMServer.renderToString(<TooltipContentTemplate></TooltipContentTemplate>)}>
      Hello World
      </div>
      <ReactTooltip style={{zIndex:"10", backgroundColor:"black",color:"black",width:"200px",height:"300px",border:'1px solid black'}} anchorId="1"/>
      <div>
       <ProgressBar value={20} labelVisible={false}/>
        </div>
    </div>
  );
};

ReactDOM.render(
  <App />,
    document.querySelector('my-app')
);

Without hover on Hello World On hover

I am trying with above code

Answer 1

This seems to be an issue related to the usage of ReactDOMServer.renderToString(), not sure what though.

You can try putting the tooltip content inside the tooltip component directly, instead of using data-tooltip-html on the anchor.

Your code updated:

import * as React from "react";
import * as ReactDOM from "react-dom";
import "react-tooltip/dist/react-tooltip.css";
import { Tooltip as ReactTooltip } from "react-tooltip";
import { ProgressBar } from "@progress/kendo-react-progressbars";

const App = () => {
  const TooltipContentTemplate = () => {
    return (
      <div>
        <ProgressBar value={20} labelVisible={false} />
      </div>
    );
  };

  return (
    <div className="container">
      <div className="row mb-4" id="1">
        Hello World
      </div>
      <ReactTooltip
        style={{
          zIndex: "10",
          backgroundColor: "black",
          color: "black",
          width: "200px",
          height: "300px",
          border: "1px solid black"
        }}
        anchorId="1"
      >
        {/* tooltip content here */}
        <TooltipContentTemplate></TooltipContentTemplate>
      </ReactTooltip>
      <div>
        <ProgressBar value={20} labelVisible={false} />
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("my-app"));