New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tooltip causing extra overflow when inside an overflow container on mobile #149
Comments
This probably happens because the tooltip doesn't uses In your case, if you're ok with no transitions in your tooltips, you could add this code in your project as a workaround: [aria-label][data-balloon]::before,
[aria-label][data-balloon]::after {
display: none;
}
[aria-label][data-balloon]:hover::before,
[aria-label][data-balloon]:hover::after {
display: block;
} This way the tooltips will only generate extra overflow when you hover the elements containing them. |
We have tooltips on ratings within a table, the table is contained inside a div that lets the user scroll the table left to right on small screens, the container does this using:
We use this container on tables as our table data could consist of multiple columns, so we need this to scroll on small screens. The issue we are facing is that the tooltip extra creates white space on mobile resulting in extra scrolling - see example:
This is the fixed width we set on our tooltips as the content displayed is a longish sentence, regardless of that without the width set its still an issue. Just reaching out to see if there's a possible solution here.
The text was updated successfully, but these errors were encountered: