tooltip popover offset when rotate

[urielzen]

There is a bug in Bootstrap (Version Currently v3.2.0) when using tooltip or popovers on a rotated element.

When using the CSS below, the tooltip is displayed with a big offset.

transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
margin-top: 59px;
width: 100px;
position: relative;
left: -40px;
top: -90px;

I think the tooltip is appearing where the element would be if it wasn't rotated, but the thing that drives me crazy is that it used to work fine with an older version of bootstrap.

NOT WORKING (Version Currently v3.2.0)
http://jsfiddle.net/urielzen/7xf9m914/

WORKING FINE (v2.3.2)
http://jsfiddle.net/urielzen/gh0yuo7w/

[fat]

these are the lines that are causing your problem:
https://github.com/twbs/bootstrap/blob/master/js/tooltip.js#L335-L336

At some point we updated tooltip to rely on outerwidth/outerheight instead of the value returned by getBoundingClientRect.

This means that we are overriding the actual correct width (of your rotated element).

I dont know as much about the tooltip code as I used to… and I'm not sure why we are overriding width/height with outerwidth/outerheight.

mb @cvrebert or @hnrch02 knows

[hnrch02]

The change to outer(Width|Height) was introduced by 8534e12. Actually, it was introduced by 217eb98.

[hnrch02]

We could do this:

diff --git a/js/tooltip.js b/js/tooltip.js
index 88ee49e..f37bade 100644
--- a/js/tooltip.js
+++ b/js/tooltip.js
@@ -332,8 +332,8 @@
     var elOffset  = isBody ? { top: 0, left: 0 } : $element.offset()
     var scroll    = { scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop() }
     var outerDims = isSvg ? {} : {
-      width:  isBody ? $(window).width()  : $element.outerWidth(),
-      height: isBody ? $(window).height() : $element.outerHeight()
+      width:  isBody ? $(window).width()  : undefined,
+      height: isBody ? $(window).height() : undefined
     }

     return $.extend({}, elRect, scroll, outerDims, elOffset)

Doesn't break any tests, AFAICT.