Tooltips and scrolling

[duzenko]

Describe the bug

Tooltips get clipped by scroll
The repro case below starts working if overflow-y: auto is removed, but obviously we can't just drop scrollers in the business app.

How to reproduce

https://stackblitz.com/edit/clarity-light-theme-v5-w2fgt2?file=src%2Fapp%2Fapp.component.html

Steps to reproduce the behavior:

1. Hover cursor over one of the tooltip icons on the left
2. See the tooltip clipped by the scroll area

Expected behavior

Tooltips show fully

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v3.x
• v4.x
• v5.x

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 11 and 12

[hippee-lee]

Hi @duzenko - unfortunately, this isn't a Clarity issue. But it is a common css issue with popups inside container elements that have overflow applied to them. Here is one approach to addressing the issue.

It handles the overflow content with a combination of css positioning to make the hidden overflow content visible and positions it with a bit of JavaScript.

Since this is a css/implementation question I am going to convert this to a discussion.

[duzenko]

Sorry, I don't see how that link answers this particular issue wit clarity tooltips
Do I need to override a particular clarity css? If so, then more info would be appreciated