Tooltip causing extra overflow when inside an overflow container on mobile

[mtsweir]

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:

.scrollable-container {
    display: block;
    overflow-x: auto;
}

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.

[kazzkiq]

This probably happens because the tooltip doesn't uses display: none, but opacity: 0 instead. The reason for that is that display doesn't animates, so if we used that property we would have no smooth in/out transitions.

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.