Tooltip (with wrapping content) on form-control-feedback incorrectly positioned (as of 1.2.0)

[scottohara]

Bug description:

The position of a tooltip on a form-control-feedback element in an input field changed in UIBS 1.2.0.
Curiously, it is only a problem if the tooltip content wraps over 2 lines.

In the plunker below, the UIBS version is initially set to 1.1.2. There are two inputs with "refresh" icons to the right. Hover over each icon and note that the tooltip appears directly above the icon.

Now change the UIBS version to 1.2.0 (i.e. change the src from "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js" to "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.0/ui-bootstrap-tpls.js")

Now note that the first tooltip is no longer correctly aligned with the icon (yet the second, non-wrapping one is still correct).

Link to minimally-working plunker that reproduces the issue:

https://plnkr.co/edit/obNMnfxwKdm6TnYdj6bz?p=preview

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.6

UIBS: 1.1.2 vs 1.2.0

Bootstrap: 3.3.6

[MarcBT]

Hi, I am experiencing the same issue.
Looks like a solution has already been commited to solve this => e2016fd
@wesleycho Do you know when this will be released please?
Have a good day!

[scottohara]

Just an update on this...UIBS 2.0.0 is an improvement over 1.2.0; but is still not back to how tooltips were correctly positioned in 1.1.2.

UIBS 1.1.2:

Tooltip perfectly aligned, with arrow directly above the element with uib-tooltip

UIBS 1.2.0 - 1.3.3:

Tooltip obscures the element with uib-tooltip (too low), and is off-center (too far to the left)

UIBS 2.0.0:

No longer obscures the element with uib-tooltip (vertically OK), but is still off-center (too far to the left)

To see each of these in action, refer to the plunker above and change the UIBS version between 1.1.2, 1.2.0 and 2.0.0.

Again, this only applies if the tooltip has wrapping text. With a single line, the tooltip position is perfect in all versions.

[LorenzoCoronati]

Just one more use case: the tooltip is positioned outside the left margin.

One solution could be to edit the positionElements function, changing the line
targetElemPos.left = Math.round(targetElemPos.left);
to
targetElemPos.left = ((targetElemPos.left < 0) ? 0 : Math.round(targetElemPos.left));

This was tested with angular 1.4.5 + ui-bs 0.14.2 and with angular 1.5.8 + ui-bs 2.0.0

[SlyNet]

Now tooltip arrow has a small gap http://i.imgur.com/walIgA4.png, when positioned on top of control