Twitter Bootstrap Tooltip not aligning correctly when it is going to go outside of window

Question

When I have an element associated with a Twitter Bootstrap Tooltip and the Tooltip will overlap outside the browser window, it tries to realign within the window but it misa

Answer 1

Yes, others have encountered this before. For example, Issue #4125: Bad position of tooltip or Issue #3556: Tooltips near edge of window don't activate properly.

In the former it is suggested to either disable text wrapping or set a fixed height.

In the latter it is suggested (rather jestingly - but nevertheless potentially useful) to set a different positioning on tooltips you know are going to be near the window edge. E.g., placement: 'left' or placement: 'right'.

At this point there doesn't seem to be any impetus toward getting this handled in the repo.

Answer 2

I have experienced this issue and found the following.

Caused the issue

<a href="https://www.facebook.com/ComfortEstatePlanning" data-toggle="tooltip" 
data-placement="bottom" title="" data-original-title="follow us on Facebook" 
><i class="fa fa-facebook-official fa-lg fa-2x pull-right"></i></a>

Note the pull-right class is on the i tag

<a href="https://www.facebook.com/ComfortEstatePlanning" data-
toggle="tooltip" data-placement="bottom" title="" data-original-
title="follow us on Facebook" class="pull-right"><i class="fa fa-facebook-
official fa-lg fa-2x"></i></a>

Solution is to put the pull-right class on the a tag