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

Feature

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

Bugs

The popover goes off the top of the screen by about 100 pixels before it moves to the "bottom" position.
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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 21 (5 by maintainers)

Most upvoted comments

Any updates on this? Hitting this issue too.

diegofrata on Jan 27, 2018

I will need some luck, positioning is a hell

valorkin on Nov 9, 2017

Fixed in #5027

ludmilanesvitiy on Mar 19, 2019

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 ?

jvinai on Nov 5, 2018

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 ?

pintojeremy on Oct 2, 2018