I have a requirement where I am showing the tooltip on the progress bar when we hover on the progress bar but I want the tooltip to move with the cursor position on hovering on progress bar.

Right now I have placed the tooltip in the middle of element by default.

I got the solution of my requirement in Mui5 Tooltips (hover tooltip) but I have Mui4 installed and I cannot change that. Hence looking for other solution.

Below the screenshot of the UI(progress bar) and the code.

<Tooltip
      title={' i am tooltip text'}
    >
        <div className="progress-bar">
          {plotProgressBar(data?.infoValue)}
        </div>
    </Tooltip>

Please let me know how can we do this or give me some reference where I can read and implement the same.