[Tooltip] Tooltip as a child takes `onClick` props from parent by default

[bendzalaj]

What's the problem? 🤔

When using MUI Tooltip as a child of an interactive element, it takes onClick props from parent by default. Is this a bug, or intended behaviour? There is a workaround where you can set e.stopPropagation to componentProps, but it would be better if it takes it as default prop.

What are the requirements? ❓

No response

What are our options? 💡

No response

Proposed solution 🟢

No response

Resources and benchmarks 🔗

No response

[siriwatknp]

Can you share a CodeSandbox that shows how you use it? Normally, the interactive element should be wrapped with Tooltip, not the other way around?

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[bendzalaj]

Hello @siriwatknp , sorry for not responding, this task fell behind. I prepared simple codesandbox example. Try to copy text from tooltip, it changes background color of parent component. Is this usage wrong? https://codesandbox.io/s/react-mui-forked-mebvog?file=/index.js

[bendzalaj]

Hi @siriwatknp , anything new on this issue? It is still open. Thanks

[Pichu0357]

Even I faced the same issue.

<TableCell onClick={handleClick}>
   <Tooltip 
      title='My Awesome Title'
      PopperProps={{
         onClick(e) {
            e.stopPropagation();
         }
      }}
   >
      <span>My Awesome Title</span>
   </Tooltip>
</TableCell>

After attaching a click event handler to PopperProps which tell them to stopPropagation() fixed my issue :)

[amhci]

+1.

I just ran into this today; I have a card component that has a descendant tooltip and I noticed that clicking on this tooltip (in order to select its text) was triggering the card's onClick! Easy enough to workaround, just wanted to bump this for visibility.