Tooltip not correctly positioned when host is close to screen edge

[oliversalzburg]

When the host element of a tooltip is close to a screen edge, this can cause the tooltip to be positioned incorrectly, because the resizing (which is applied to the tooltip once it is moved close to the edge) isn't taken into account when calculating the position of the tooltip.

[nicksanders]

I'm seeing this too, I thought it might be just elements with float: right but its not

[chrisirhc]

Might be similar to #2992 . I haven't gotten a chance to look into this though.
Could you please post a Plunker that demonstrates this issue?

[oliversalzburg]

@chrisirhc I agree. The behavior I'm seeing seems identical to what I see in the Plunker in #2992.

However, I don't think the text-align has anything to do with it. When removing the text-right class and making the rendered window really narrow, the behavior is the same as what I was reporting. The text-align only incidentally causes the same behavior, because it forces the button close to the right edge of the window.

[oliversalzburg]

What's also interesting is that tooltips on the left side of the screen seem to be cut off instead of being misaligned:

[chrisirhc]

Perhaps you can test if #2996 resolves your issue? I can't test it for this issue as there's no Plunker here, but I was able to test it with #2992.

[oliversalzburg]

Here is a Plunker that showcases both issues: http://plnkr.co/edit/GEQKagaZT7oZheK37NnG?p=preview Sorry for not providing it earlier.

I'm currently not really able to properly test your fix in our project and I'm not sure how to test it in Plunker.

[nicksanders]

The fix in #2996 fixes the problem for me, thanks

[SlyNet]

Unfortunately fix in #2996 doesn't help

[chrisirhc]

@SlyNet , could you post a Plunker that demonstrates it doesn't help?

[SlyNet]

Sorry, I was adding changes to ui-bootstrap.js, but they were needed in ui-bootstrap-tpls.js. Changes in #2996 really solves this case. Thanks.

[ronaldjeremy]

Are you sure #2996 really fixes this? in http://plnkr.co/edit/GEQKagaZT7oZheK37NnG?p=preview the tooltip on the left still gets cut off even with a ui-bootstrap-tpls.js that includes #2996

[oliversalzburg]

I was now finally able to test #2996 with our code. It resolves the issue.

[oliversalzburg]

Positioning is still a bit weird though. Compare the vertical positioning of these two tooltip instances in our application:

[ronaldjeremy]

@oliversalzburg this does not seem to be fixed? I forked your plunker and added a ui-bootstrap-tpls-modified-0.12.0.js that includes the #2996 changes. The left tooltip still gets clipped? here it is:

http://plnkr.co/edit/AK750fE2Pzm78QbXMFYC?p=preview

[oliversalzburg]

@ronaldjeremy Left one is clipped, right one is not positioned correctly. I guess #2996 doesn't completely fix the issue, but for our cases it was a big improvement. However, maybe talk about the issue should be concentrated in one thread on #2996 or even #2995.

[ronaldjeremy]

@oliversalzburg this thread looks like the best place for this particular issue? neither #2996 nor #2995 detail the left getting cut off like this thread does. Should I re-post my plunker to one of those?

[oliversalzburg]

@ronaldjeremy There is a general positioning bug in the component.

But if an element with a tooltip is positioned so extremely close to an edge of the display area, then it's a design problem. With the current sizing and positioning logic, the tooltip on the left edge would have a width:height ration of 1:10, which would be just as useless as clipping it.
In that case, a different tooltip-placement probably makes more sense.

Although, I guess, one could argue that no matter how well or bad a tooltip would look, it shouldn't be clipped and should be positioned at the right location. However, if you don't clip the toolip and it gets very high as a result of it, then it could be clipped at the top. What then?

[fgarit]

Reporting that the issue is still there in ui-bootstrap 0.13.3:
http://plnkr.co/edit/FzORHhIMd2oD03BiVeAu?p=preview

Whereas it's not there in bootstrap 3.3.5:
http://plnkr.co/edit/P03333FEPOqzCq9HqzKn?p=preview

[trane294]

2.5.0 still there. Flickering and displaying correct and not correct randomly. Just try to hover and unhover few times

http://plnkr.co/edit/5ifVcgPhV08kRGRUbDO1?p=preview

[davidmeirlevy]

This bug still exists, so why is this issue still closed?
Is there another issue about that same bug?