Question 213395 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    I had the same problem as you when I tried to add a tooltip to the label of an outlined TextField. It turns out that the label prop is not really the label component that you see on the screen. It’s just used for some internal calculations, and the actual label component is InputLabel, which you can’t customize in a TextField.

    So what I did was to create my own TextField using FormControl, Tooltip and OutlinedInput components. This way, I could put the label element inside a Tooltip component and pass it to FormControl. I also had to pass the same label value to OutlinedInput to keep the layout consistent.

    For example:

    <FormControl>
  <Tooltip>
    <label htmlFor="component-outlined">Name</label>
  </Tooltip>
  <OutlinedInput
    id="component-outlined"
    defaultValue="Hello World!"
    label="Name"
  />
</FormControl>

    This worked for me and I was able to add a tooltip to the label without any issues. You can check out the full example here: codesandbox.io

    This is basically how Material UI’s TextField works behind the scenes, so you’re not missing out on anything by doing this. If you want to learn more about how TextField is composed of different components, you can read this section of the docs: https://mui.com/material-ui/react-text-field/#components

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search