Tooltip hangs off page

[montlebalm]

Wide tooltips are extending past the edge of the window. It looks like there needs to be some kind of boundary detection put in place.

Here's an example: http://plnkr.co/edit/uGI8m3

[pkozlowski-opensource]

@montlebalm I see. What would be your proposal to handle this situation? Did you check what is done in the original Bootstrap?

[montlebalm]

A cursory glance of the original source makes me think it's this block of code: https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L193

Generally, when you check for boundaries, you want to see if either the top, left, right, bottom offset edges are off the viewport. You can usually fix the problem by simply bumping the offset. If you want to get clever, you could temporarily move a placement "top" tooltip down to "bottom", or "left" to "right".

I'm not familiar with the limitations of Angular's jqLite, but the more you can stick to the original Tooltip source, the better off you'll be.

[joshdmiller]

The tooltips have a small caret in the center that points back to the object that originated it. If we move the position of the tooltip, the caret will no longer point at the original object. So moving it based on its proximity to the edge of the screen is a -1 for me.

There is already another issue (#375) about dynamically setting the placement attribute based on its proximity to page borders. If we want to do something like this, I think that would be the better approach.

@angular-ui/bootstrap Thoughts?

[pkozlowski-opensource]

@joshdmiller I kind of agree with you. I can see that Bootstrap is trying to do some calculation magic but didn't dig into it. I would suggest having a look at their code and assess if we can do similar things easily. If not we should close this one in favor of #375 IMO.

[pkozlowski-opensource]

Let's address this one in #375

[cstephe]

#375 doesn't cover this one in my book, #375 says if the user says "display it left" but there is no room then display it right instead. This case has the (horizontal [left/right] or vertical [top/bottom]) directions have room but the unspecified directions do not.

I was able to solve this issue since version 0.11.0 you can override the positioning service.

http://plnkr.co/edit/23wVM49v8Qj2wPa4GKRL?p=preview

I modified the original a little, I have to append mine to body because the other way causes a stutter so I only made it work for those. But basically override the $position service have it do what you want it to do.

[bheithaus]

I agree, @cstephe, at least #375 's fix doesn't cover my use case. thank you for your insight!

[mzur]

The plunker demonstrates that 'auto' positioning doesn't always work. There isn't enough space in any other direction either. So #375 is no fix for this issue.

But isn't this easily fixable for the case appendToBody: true? In this case left and top simply mustn't get smaller than 0 or whatever margin is default.

[ersimont]

In case this was not true when this discussion started, let me point out that Bootstrap has an auto option like #375, and also adjusts tooltip placement to keep it within the bounds of a specified element. They have a viewport option to specify that element:

Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or { selector: '#viewport', padding: 0 }

By default, they use "body" as the viewport:

{ selector: 'body', padding: 0 }

(Quotes from http://getbootstrap.com/javascript/#tooltips-usage)

[stephengardner]

@ersimont neither of those options are available in angular-ui's bootstrap. Please suggest a fix

[ersimont]

Oh - yeah - sorry I didn't mean to say there was a fix in angular-ui. I just know that angular-ui tries to provide (most of) the same functionality as bootstrap itself, so I thought it was worth noting.

[j-walker23]

Hey guys. Is shifting the little arrow and the tooltip box away from the edge of the screen like original bootstrap does off the table? Seems like a cool/handy little feature that bootstrap employs so i was just curious on thoughts about this being closed.

[soerface]

I would also love to see AngularUI handling the popover like bootstrap does, moving the arrow pointing onto the annotated element to the side. May you reopen this issue?