bug(popover): overflowing window borders

[yangit]

Popovers are overflowing over window borders.
http://plnkr.co/edit/q2Zj1F
Solution might be to add "Auto" positioning option.

[joshdmiller]

Yeah, there's currently no functionality to intelligently position the popover; this functionality is left to the user.

That said, I don't object to adding said functionality, but I'm not sure how best to make it work. Would we have an "order of precedence" to determine in which order to try these? Say, clockwise starting with "top"? And would this positioning be affected only when "auto" was specified or should we account for borders in all the positions, with the option to disable?

[yangit]

How about being able to list a few options in an order preference?
popover-placement="top,bottom"
Or just popover-placement="auto" which would be equivalent to popover-placement="top,right,bottom,left" and would be default behavior?

If there is no way to show it properly (fitted on the page) than just use last provided option.
Same problem aplies for tooltip function as well.

[artworkad]

Visual example: http://craigsworks.com/projects/qtip2/demos/#mouse

[lanterndev]

I think it's much more often the case that when a user specifies placement="left" (or "right", "bottom", "top"), she also wants the "auto" behavior in cases where her tooltip/popover doesn't fit on the screen. It's hard to think of a use case when you'd prefer a tooltip to appear off-screen.

So rather than adding an "auto" option equivalent to "top,left,bottom,right", I think we should just by default apply smart repositioning after applying the user's chosen placement. That way, in cases where the tooltip would fit with the user's original placement choice, that choice continues to be honored, and in cases where it won't, users' existing code written against earlier versions of angular-bootstrap will automatically benefit from the new intelligent behavior, without having to change any of their code. And users writing against the new angular-bootstrap won't be forced into the "top,left,bottom,right" behavior for all tooltips just to get smart behavior, when they'd prefer to continue to have "top" not be the first placement tried.

Helpful to look at prior art which has had the benefit of learning from widespread use. Check out qTip2's "adjust.method" option. By default the behavior is "flip", so this is along the lines of the logic above. qTip2 offers a lot more configuration options than I think we want to bother with, but it does have sensible defaults that I think we could copy.

Looking at Twitter Bootstrap, it still has not solved this problem, but several issues have been opened about it, and at least two currently-open PRs (twbs/bootstrap#6848 and twbs/bootstrap#7996) are taking this approach.

In the meantime, should we add the auto-flip behavior to angular-bootstrap, which I think would be a clear improvement over current behavior? If Twitter Bootstrap ends up doing the same thing, we'll have gotten there first. Otherwise, we can reevaluate if and when they come up with their solution.

[cm325]

:1 for this, this just looks terrible when your tooltip is off the page edge

[websirnik]

+1

[websirnik]

Bootstrap v3 options seems to me quite right:

Placement - how to position the popover - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.

[websirnik]

@chrisirhc I do think this is important to be implemented before 1.0.0 release.

[pkozlowski-opensource]

Yes, we should add support for 'auto', it shouldn't be too difficult

[sirio13]

Any news on this?

[mrkev]

+1
Anyone know when this might be implemented?