diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index 529b6f5cf6fa7e8a4a3648452d23c5a7a8d3f2bb..fd02a5e7f2c20b0f57bbf5d9bd2f4ea8adf8f2f0 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -919,4 +919,42 @@ $(function () { .bootstrapTooltip('show') }) + test('should correctly position tooltips on transformed elements', function () { + var styleProps = document.documentElement.style + if (!('transform' in styleProps) && !('webkitTransform' in styleProps) && !('msTransform' in styleProps)) { + expect(0) + return + } + + stop() + + var styles = '<style>' + + '#qunit-fixture { top: 0; left: 0; }' + + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }' + + '.tooltip { position: absolute; }' + + '.tooltip .tooltip-inner { width: 24px; height: 24px; font-family: Helvetica; }' + + '#target { position: absolute; top: 100px; left: 50px; width: 100px; height: 200px; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }' + + '</style>' + var $styles = $(styles).appendTo('head') + + var $element = $('<div id="target" title="1"/>').appendTo('#qunit-fixture') + + $element + .on('shown.bs.tooltip', function () { + var offset = $('.tooltip').offset() + $styles.remove() + ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location') + ok(Math.abs(offset.top - 126) <= 1, 'tooltip has correct vertical location') + $element.bootstrapTooltip('hide') + start() + }) + .bootstrapTooltip({ + container: 'body', + placement: 'top', + trigger: 'manual' + }) + + $element.bootstrapTooltip('show') + }) + }) diff --git a/js/tooltip.js b/js/tooltip.js index 9932c0b18c2389a055daa678d5efe0fc0c4f31e8..d0da83a5a965bd24abc14595c16d3c0a0104166a 100644 --- a/js/tooltip.js +++ b/js/tooltip.js @@ -329,7 +329,6 @@ var el = $element[0] var isBody = el.tagName == 'BODY' - var isSvg = window.SVGElement && el instanceof window.SVGElement var elRect = el.getBoundingClientRect() if (elRect.width == null) { @@ -338,10 +337,7 @@ } 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() - } + var outerDims = isBody ? { width: $(window).width(), height: $(window).height() } : null return $.extend({}, elRect, scroll, outerDims, elOffset) }