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 preventOverflow option #4678
Comments
The report issue is also happen to dropdown and popover. From the code I can see preventOverflow has been added as default.
ng-bootstrap/src/util/positioning.ts Lines 88 to 173 in b5d5feb
Personally, this has been struggling me for a while as well. |
I have found out the issue. The following code cause ng-bootstrap/src/util/positioning.ts Lines 165 to 170 in b5d5feb
If we compare the option bootstrap has added and ng-bootstrap's code.
If we either remove ng-bootstrap's modifier or swap with bootstrap's modifier. In both case works. Following is popperOptions function I use to debug ng-bootstrap. The logic is to check how many
@maxokorokov The second preventOverflow that ng-bootstrap added, I feels not necessary. Bootstrap use it to setup boundary, where ng-bootstrap setup nothing. We can potentially remove it. |
Hi,
I'd like to report a possible bug. When a tooltip is near the edge of the document (or near the edge of it's parent element with
overflow:hidden
style) and there isn't theauto
value inplacement
option, the tooltip overflow the visible part of the viewport resulting in being partially "cropped". According to popper docs this can be avoided using thepreventOverflow
option that (if I'm not wrong) should be enabled by default, but it doesn't seem to work.I also tried to manually add the modifiers via the
popperOptions
property without any success...It seems to work fine with only bootstrap:
Is there a way to keep the placement (e.g.
bottom
) and avoid the overflow?Link to minimally-working StackBlitz that reproduces the issue:
https://stackblitz.com/edit/angular-jimum7?file=src%2Fapp%2Ftooltip-basic.html,src%2Fapp%2Ftooltip-basic.ts
Versions of Angular, ng-bootstrap and Bootstrap:
Angular: 17
ng-bootstrap: 16
The text was updated successfully, but these errors were encountered: