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?

[derzwen]

+1

I also need this feature. Would be very nice to have it.

[scaleupcto]

+1, this feature would be nice

[amarinov]

+1 from me too.

[JustinPlute]

+1

[modipeluri]

I'd also love to see this implemented. Thanks for the great job so far!

[elyngved]

👍 !

[TheAifam5]

+1

[eliseumds]

+1

[atavism]

+1

[mateuszdw]

+1

[ayeletdn]

+1

[jonaswindey]

+1

[buzznick]

+1

[ilovett]

👍

[rzschech]

+1

[knorrus]

+1

[drewbeck]

Still need this! Were I JS ninja sufficient I would whip it up. Alas :(

[cleversprocket]

A workaround is to add another directive to the element and bind a mouseenter event or whatever is being used to fire the tooltip and adjust the position:

angular.module('app')
    .directive('positionTooltip', ['$timeout', function ($timeout) {
        return {
            restrict: 'A',
            scope: false,
            link: function (scope, element, attrs) {
                var el,
                    arrow,
                    offset;
                element.bind('mouseenter', function () {
                    $timeout(function () {
                        el = element.next();
                        if (el[0].offsetLeft < 0) {
                            offset = el[0].offsetLeft;
                            el.css('left', 0);
                            arrow = el[0].querySelector('.tooltip-arrow');
                            arrow = angular.element(arrow);
                            arrow.css('margin-left', (offset + -5) + 'px');
                        }
                    })
                });
            }
        }
    }]);

[hcientist]

Does twbs/bootstrap#12328 end up in here somehow?

[jpmnteiro]

+1

[efosmark]

+1

[RobJacobs]

I have a couple of ideas I've been working on for this issue I'd like to share. I need to pull them together in a plunk, then will post them shortly.

[chrisirhc]

@thegreatmichael thanks for mentioning that issue, we can use that as a reference implementation.

[rufinitsw]

+1

[pyella]

+1, In addition to that the placement of popover should be made similar to hover box. In hover box the position of the placement depends on user cursor or place where mouse enter happens and all the contents in the box appear on the right side of the cursor at bottom. If we reach the bottom of the page the content should re-position to top right and vice-versa when we reach top of the page.

[rvanbaalen]

It's already clear that this is a wanted feature.

Please stop all the +1 responses

We'd like to keep this open for on-topic discussion instead of having to receive notifications for all +1 responses.

[pads]

Just thought I'd post my work-around if it's of use to anyone. This enables a position to be set just before the popover becomes visible. I had to tweak the CSS to initially hide the popover until positioning was complete as there were times when the popover would show and then jump into the correct position.

[Alexintosh]

is this solved?

[gruberjl]

I was having this issue with the uib-popover-template directive. It took me a while to figure out how to hack this dang thing (I'm new to coding so it may be simple and I'm an idiot [2 $timeouts were required])

This hack is for uibPopoverTemplatePopup but you could just find out what directive ui-angular is using for the tooltip or w/e by looking at the code.

if you don't use popover-append-to-body="true" the popover will be inline (the next element after your button). If you allow the popover to insert directly after the button the offset left may not work (because it offsets to the nearest parent with position relative (I should probably check that).

Lastly, I only tested the code if you use popover-placement="top". It will probably work if you use popover-placement="bottom" but I didn't test it. It won't work for left or right (because I'm using margin-left)

<!-- In the Template -->
<a href popover-placement="top" uib-popover-template='"popovers/ProgramProgressionHelp.html"'  popover-append-to-body="true">Button</a>

// Directive code
app.directive('uibPopoverTemplatePopup', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      $timeout(function() {
        $timeout(function() {
          var popover = element;
          var offset = popover[0].offsetLeft;

          if (offset < 0) {
            var arrow = popover[0].querySelector('.arrow');
            angular.element(popover).css('margin-left', (offset*-1) + 'px');
            arrow_margin_left = angular.element(arrow).css('margin-left');
            angular.element(arrow).css('margin-left', (offset + parseInt(arrow_margin_left)) + 'px');
          }
        });
      });
    }
  }
}]);

Sorry I can't do a better fix. I looked at the source and your using fancy providers, I don't know how to use those things :)

[icfantv]

@gruberjl, we have smart/fixed positioning on our radar.

[icfantv]

Closing in favor of #4762.