The past days I was implementing the ngbTooltips. In this case the tooltips gets a template passed and a custom class. A series of buttons with tooltips are generated using an *ngFor. This app has to be suitable for small mobile viewports (320x568px). The problem that occurs is that the tooltips flows off screen on this viewport size. Especially the tooltips which are shown on the right edge of the screen. Although I defined the placement property as bottom-start bottom bottom-end top top-start top-end. A demo app can be found on Stackblitz.
As far as I could discover it has something to do with overriding the max-width value in
.my-custom-class .tooltip-inner {
max-width: ...
}
Environment:
- Angular 13.0.3. and 13.2.4
- Browsers: Safari 15.4 and Google Chrome 99.0.4844.83
Is there a way I can solve this on small viewports?