popover array is missing when popover-placement is top-left bottom-left

[mindej]

To reproduce go to

https://morgul.github.io/ui-bootstrap4/

Version of Angular, UIBS, and Bootstrap
Angular: 1.5.0

UIBS: 3.0.3

Bootstrap: 4.0.0

[Morgul]

The arrow positioning code is horribly broken; and my few hacks to it have fixed the very slim use case I had, but it's really a mess.

I would love to get some help fixing it; I've spent a few hours and are no closer to understanding how that code originally functioned than I am now, let alone coming up with a fix. Alternatively, the project could be ported to using popper.js.

[DarkNami]

Bootstrap 4 only provide 'top, bottom, left, right' 4 placements, you have to add 'top-left' by self.

This is 'left-top' for Bootstrap v4.3.1:

.bs-popover-auto[x-placement^="left-top"], .bs-popover-left-top {
	margin-right: .5rem;
}

.bs-popover-auto[x-placement^="left-top"] > .arrow::before, .bs-popover-left-top > .arrow::before {
	right: 0;
	border-width: .5rem 0 .5rem .5rem;
	border-left-color: rgba(0,0,0,.25);
}

.bs-popover-auto[x-placement^="left-top"] > .arrow::after, .bs-popover-left-top > .arrow::after {
	right: 1px;
	border-width: .5rem 0 .5rem .5rem;
	border-left-color: #fff;
}

.bs-popover-auto[x-placement^="left-top"] .arrow, .bs-popover-left-top .arrow {
	right: calc(-0.5rem);
	width: .5rem;
	height: 1rem;
	margin: .3rem 0;
}

[BabyBoat]

Thanks DarkNami,

Here is the fix for bottom-right:

` .bs-popover-auto[x-placement^="bottom-right"], .bs-popover-bottom-right {
margin-top: .5rem;
}

.bs-popover-auto[x-placement^="bottom-right"] > .arrow::before, .bs-popover-bottom-right > .arrow::before {
    top: 0;
    border-width: 0 .5rem .5rem .5rem;
    border-bottom-color: rgba(0,0,0,.25);
}

.bs-popover-auto[x-placement^="bottom-right"] > .arrow::after, .bs-popover-bottom-right > .arrow::after {
    top: 1px;
    border-width: 0 .5rem .5rem .5rem;
    border-bottom-color: #fff !important;
}

.bs-popover-auto[x-placement^="bottom-right"] .arrow, .bs-popover-bottom-right .arrow {
    top: calc((.5rem + 1px) * -1);
}`

Costed me more than an hour to understand those crazy stuffs and imitate DarkNami solution. Hope someone in the future can figure this out for themselves