Twitter Bootstrap Tooltip not aligning correctly w

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 misaligns vertically (i.e. the top alignment of the tooltip is now centred rather than above the target element)

Has anyone encountered this before and if so, what was the work around/fix/update?

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