Prevent popovers from running off the screen

[ynicolaou]

I ran into the following issue when trying to use bootstrap's popover. The element that triggers the popover is close to the right border of the window, which causes the popover to extend off the screen.

I managed to fix this issue by adding the following piece of code, to where the positioning calculation is done:

if (tp.left + actualWidth > $(document).outerWidth()) {
    tp.left = ($(this.options.container).offset().left + $(this.options.container).outerWidth()) - actualWidth;
    $tip.children(".arrow").css("left", this.$element.offset().left - tp.left + (this.$element.width() / 2));
}

This seems to work for bottom and top placements. For left and right placements, you will need to use a slight variation:

if (tp.top < 0) {
    tp.top = $(this.options.container).offset().top;
    $tip.children(".arrow").css("top", this.$element.offset().top - tp.top + (this.$element.height() / 2));
}

Here is the end result, notice how the popover is now all contained inside the window:

I'm really interested in hearing opinions on whether this is the right fix for this issue. I would also like to see this being addressed in the next version of bootstrap.

[arielkirkwood]

Also interested in this issue!

[dperolio]

Ditto. Hulu has a good example of this done correctly.

Where did you put your code exactly? I've tried several spots that seem right, but it's not working for me. Thanks.

[eyot08]

Same issue here, and also not sure where to insert that... didnt work for me.

[matthewblack]

+1

[DeepAnchor]

+1

[arielkirkwood]

To those of you wondering where to put this, we actually monkey-patched the example code above inside bootstrap.js (the popover section, I think), so it's not a suitable workaround if you're using bootstrap.min.js (unless you do the minifying yourself)

[fat]

pls refer to #1833

[cstephe]

@fat I know this is closed more than 9 months now However, Isn't this bug a different issue than #1833.

Unless I'm reading it wrong #1833 deals with swapping positions if there is no room. Like top to bottom etc. This deals with for example a bottom tool tip on the right edge of the screen. There is room on the bottom but not to the right.

[cvrebert]

@cstephe Addressed by #12328 I believe.

[schartier]

+1