Ngx-bootstrap: fix(popover)(tooltip): "auto" position is not working correctly

[nfiles]

Feature

"auto" positioning in the [popover] directive. This could be related to issue #2661, but I'm not sure.

Bugs

1. The popover goes off the top of the screen by about 100 pixels before it moves to the "bottom" position.
2. When the popover would go over the right side of the screen, it always resorts to the "top" position.

Context

version: 1.9.3

The application is a dashboard with draggable tiles, each having a popover in the top right corner.

This is the current configuration for the popover:

• [popover]="popoverTemplate"
• placement="auto"
• container="body" (several parent elements have overflow: hidden)
• [outsideClick]="true"

I have created a simplified demo here: https://github.com/nfiles/ngx-bootstrap-popover-issue-demo

Misc

I wasn't sure where to go next in my debugging, so I started to look at the source. In src/positioning/ng-positioning.ts at line 197 I noticed that if the "top" and "bottom" else-if blocks were switched, everything worked as expected. I assume this is because "top" is preferred over "bottom", but I do not know why the "top" position is chosen when the popover is going off screen.

[nfiles]

I deployed the demo to now.sh (https://ngx-bootstrap-issue-demo-smunotreuo.now.sh/) for examination. Strangely, I was able to recreate both issues locally, but the deployed version behaves a little differently and Bug 1 (going off the top of the screen by ~100 pixels) does not appear to happen anymore.

Update: It seems that the bug depends on window resolution. Bug 1 occurs in the deployed version if the the resolution is 1280x800, but not 1440x900. This was tested using the Chrome Developer Tools.

[valorkin]

Thanks for demo! We will be reworking auto positioning from zero, cuz now it's more experimental and works only for static use cases

[nfiles]

You're welcome and thank you so much for your response! I think we can just use a small modal in our use case. Good luck with the auto positioning rework.

[valorkin]

I will need some luck, positioning is a hell

[cannontechnology]

Is this issue actively being worked on or has it been tabled?

[valorkin]

V2 is stable and we are fixing mostly datepicker and build issue before releasing it
PS you can see issues marked as roadmap aggregation issues per component, this is a plan for v2 to 3
Positioning is a part of it

[diegofrata]

Any updates on this? Hitting this issue too.

[aldus25]

Add a parent div element with the class property of 'position-relative' and it will solve your problem

[sankarkolluri]

@aldus25 Could you please be little more specific - which element should be wrapped inside a parent div (the trigger control or the popover)?

[sivabhusarapu]

Any ETA on this issue? we are still facing this issue.
If you have any workaround to fix this issue, please let us know. As of now if the button is at corner of the window or any dialog, the popover is being cut. Please suggest. Thanks!

[aldus25]

Add a parent div element with the class property of 'position-relative' and it will solve your problem

[sivabhusarapu]

@aldus25 can you please give me any demo link kinda. really not sure when you say wrapping over a relatively positioned div. very much appreciated.

[aldus25]

The tooltip auto is absolute positioned, so if it doesnt find a relative positioned parent it will use the window, body or any tag available. You need to wrap the tooltip with any tag but this tag has to have a position: relative css style. For more details on positioning please refer to: https://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

[pintojeremy]

Any updates ?
I ran into issues with auto placement too.
Besides those two buggy behaviors listed above, in some cases element wont find any placement and appear on top left corner.

Found out that autoPosition method will not return any default placement if there is enough space in each directions.
You can reproduce by playing with @nfiles demo (https://ngx-bootstrap-issue-demo-smunotreuo.now.sh/), just drag 'Tile 3' to the center. Demo gif.
Returning a default position will fix this issue and its easy, even if a rework should be done.

Would you like a PR ?

As @valorkin said, positioning is a hell of a problem. Bootstrap uses a great 3rd party library, (popper.js), why don't you use it as well in this project ? Is this only to avoid additional dependencies ?

[ChristianGalvez23]

Any solution for this? I have several tooltips implemented with this project but whe the element is near of a corner the tooltip get cut a little. It's obviously about positioning.

[dotob]

like @Waowam i think you should use popper.js

[jvinai]

I need to do a left or right display of a popover depending of the room but i cant use placement with 'right left' option so i have to use auto instead.
Using auto display the popover on top on my element and it is cut in half.

Any solution or plan for fixing this bug ?

[odedkeren1]

We will be happy to have this fix as well !!!
Looking forward

[aburht]

Any updates on this

[ludmilanesvitiy]

Hello everyone! This issue fixed in version 3.3.0. Positioning service fully rewrote: https://github.com/valor-software/ngx-bootstrap/blob/development/CHANGELOG.md
I've tried this example with 3.3.0 version and this is my results:

[ludmilanesvitiy]

Fixed in #5027