Mui add a tooltip on TextField label is displaying two tooltip boxes

Question

I'm trying to add a tooltip to a label prop of the TextField. And I need to make this work on touch screen, so I handle the open and close event manually.

But the tooltip appears as two different boxes

.

It looks weirder when I use ipad screen.

Anyone have idea about this? Here is the sample https://codesandbox.io/s/draft-mui-tooltip-in-label-k9py2m?file=/src/App.tsx

Answer 1

I believe the component in label isn't considered as part of the vDOM tree and you end up with multiple Tooltip elements. Here I moved the Tooltip outside but kept its child inside the label.

https://codesandbox.io/s/draft-mui-tooltip-in-label-forked-hc9vvv?file=/src/App.tsx