search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.69k stars 32.22k forks source link

[Tooltip] Getting a tooltip for the hidden items of a scrolling items #39901

Open sathish869 opened 11 months ago

sathish869 commented 11 months ago

Duplicates

Latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1.Create a div with overflowY:"scroll" and limit the height 2.if you scroll up or down , Tooltip will move more than the height in top and bottom of div 3. HTML code.txt

Current behavior 😯

Even my element is invisible and it exist above the div, the tooltip shows

Expected behavior 🤔

The tooltip show only is the element is visible

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```
sathish869 commented 11 months ago

image

mj12albert commented 11 months ago

@sathish869 Could you provide a repro? You can fork this template: https://mui.com/r/issue-template-latest

Even my element is invisible and it exist above the div, the tooltip shows

However based on this, I would guess the issue is not with the Tooltip, but rather with z-index stacking issues that were caused by manually changing CSS overflow properties

Alternatively, try using the disablePortal prop to render your tooltips in the DOM and not in a portal:

<Tooltip PopperProps={{ disablePortal: true }} />
sathish869 commented 11 months ago

Hi @mj12albert I have provided my repo in the given template, Can you please check and let me know the issue in that?

mj12albert commented 11 months ago

Hi @mj12albert I have provided my repo in the given template, Can you please check and let me know the issue in that?

@sathish869 Please use the CSB template!

Your link https://github.com/mui/material-ui/files/13390935/HTML.code.txt is prompting me to download some unknown txt file

PS: Here are some tips for providing a minimal repro: https://stackoverflow.com/help/mcve

github-actions[bot] commented 10 months ago

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.

sathish869 commented 10 months ago

Hi @cherniavskii I have created the sandbox project and you can access it with this link

https://codesandbox.io/p/sandbox/naughty-hugle-w4pf5l?file=%2Fsrc%2FradioButtonsComponent.jsx%3A90%2C71, please have a look and help me to resolve this issue.