Popover arrow in bottom-left or bottom-right format isn't centrally aligned to button

[trippytango]

I have a 36 x 36px button and i've set up the popover to be auto bottom. When in a mobile view, i'm expecting the popover arrow to appear central to the button when presented in the bottom-left or bottom-right format.

As you can see in the image below, the arrow isn't appearing centrally when bottom left or bottom right. Is this intended or is there a way to get it to display centrally?

[trippytango]

Originally closed as I believe it was something that I had done.

After further investigation, it is because I've changed the border-radius of the popover. Should this matter when positioning the arrow?

Just because i'd expect it to still be central to the button, with or without border-radius.

See plnkr: http://plnkr.co/edit/1gUphx78UA0gLPJXTQgy?p=preview

[RobJacobs]

The arrow positioning logic is in the $position service here The arrow position is calculated from the edge of the popover element, minus the border radius. The element the popover is attached to is not considered.

[icfantv]

@trippytango, this is designed behavior and unfortunately has the side-effect that you've exposed. The reason why is because if the element on which the popover is attached is, in your case, wider, it wouldn't look weird at all. If I'm reading @RobJacobs' note correctly, I think you could add a right margin to your popover template to force it over. Not ideal, but might make it work in your case. I don't know how this would play in auto mode, however.

@RobJacobs I do think that this is a valid use case, however, having a tooltip/popover in this manner - i.e., using a help icon. Is there something we can do in this case in the service, or is it too complex of a problem to solve since it would now involve the widths of both the popover and the element to which the popover is attached?

[trippytango]

@icfantv This is the problem we are having, we have it set up as "Auto Bottom". Do you think this behaviour could be refactored to try and incorporate the missing border radius (If the 6px is a default value) so that the value is always correct?

[icfantv]

@trippytango, I'm going to have to defer to @RobJacobs as he's the one who wrote the new $position service.

[RobJacobs]

@icfantv @trippytango The border radius I mentioned is the border radius of the popover style from TWBS which is pulling from the @border-radius-large variable (6px default). This keeps the arrow edge from rendering on top of the rounded popover corner.

It has nothing to do with the element that the popover is being positioned against. If you want to center a right aligned popover on the attached element, you will need to accommodate for the @border-radius-large (6px) and 1/2 the @popover-arrow-outer-width (11px). You could potentially add a css class that targets the arrow to make it wide enough to center on that button, but that's no easy feat.

I'm not sure how centering the arrow on the attached element would look in other use cases:

so I don't think this is something we want to do by default. I followed how Tether was doing their arrow positioning: http://tether.io/docs/welcome/

[RobJacobs]

@icfantv @trippytango I did some digging and I think I came up with a way to support setting the arrow placement. This plunk demonstrates using a class to set the arrow margins to center the placement if desired. It will require a code change to remove setting the margin to 0 inline here

[icfantv]

That looks good to me. Two questions:

1. Does setting that margin have ramifications for other users?
2. Just a note for others that that selector won't work if *-append-to-body is used.

[trippytango]

Sorry that i've only just got back to this. So @RobJacobs has a fix but potentially it could have more of an impact in general?

If the fix is good to go, when would it be released?

[RobJacobs]

@trippytango TWBS adds margins to the tooltip arrow as seen here and to the popover arrow as seen here I'll need to do some testing to see what impact not resetting the margins to 0 has.

_EDIT_
This plunk demonstrates why resetting the margin to 0 was necessary. I would prefer to use a class to reset the arrow, something like:

.arrow-position-reset {
    top: 'auto',
    bottom: 'auto',
    left: 'auto',
    right: 'auto',
    margin: '0'
}

[shenlong]

Hi Guys,

If I use top-left or top-right, we do not position the arrow to the center of the element. Is that the right behaviour? Using auto does not help. Example here:
https://plnkr.co/edit/uxIi3ZJkBKov6HVoEkIX?p=preview

Check out the bottom table where the mouseenter effect for popover is applied.
Is there an official way to align the popover to center? using the global css:

.popover.top{
    margin-left: 10px
}

will cause issues with auto.

[icfantv]

@shenlong Yes, this is the correct behavior. the corner positions are for the respective edge of the popover/tooltip box. E.g., for top-left, the left edge of the popover box will be aligned with the left edge of the item on which the popover has been placed.

[shenlong]

Hi @icfantv , you have been helpful. In that case, I will use css override for this:

/****Popover override****/
/**Push the popover to the center instead of the edge.**/
.popover.top-right{
    margin-left: 5px;
    margin-top: -15px;
}
/**Push the popover to the center instead of the edge.**/
.popover.top-left{
    margin-left: -5px;
    margin-top: -15px;
}
/**Push the popover to the center instead of the edge.**/
.popover.bottom-right{
    margin-left: 5px;
    margin-top: 15px;
}
/**Push the popover to the center instead of the edge.**/
.popover.bottom-left{
    margin-left: -5px;
    margin-top: 15px;
}

The main properties to change is margin-left and margin-top. Align to your desired center!
I wonder if this is the best way to do alignment.