diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index c0c6284852..b578704af4 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -836,4 +836,35 @@ $(function () { equal(currentUid, $('#tt-content').text()) }) + test('should position arrow correctly when tooltip is moved to not appear offscreen', function () { + stop() + + var styles = '' + var $styles = $(styles).appendTo('head') + + $('Foobar') + .appendTo('body') + .on('shown.bs.tooltip', function () { + var arrowStyles = $(this).data('bs.tooltip').$tip.find('.tooltip-arrow').attr('style') + ok(/left/i.test(arrowStyles) && !/top/i.test(arrowStyles), 'arrow positioned correctly') + $(this).bootstrapTooltip('hide') + }) + .on('hidden.bs.tooltip', function () { + $styles.remove() + $(this).remove() + start() + }) + .bootstrapTooltip({ + container: 'body', + placement: 'top', + trigger: 'manual' + }) + .bootstrapTooltip('show') + }) + }) diff --git a/js/tooltip.js b/js/tooltip.js index 1e10af27fe..614f41451a 100644 --- a/js/tooltip.js +++ b/js/tooltip.js @@ -261,16 +261,18 @@ if (delta.left) offset.left += delta.left else offset.top += delta.top - var arrowDelta = delta.left ? delta.left * 2 - width + actualWidth : delta.top * 2 - height + actualHeight - var arrowPosition = delta.left ? 'left' : 'top' - var arrowOffsetPosition = delta.left ? 'offsetWidth' : 'offsetHeight' + var isVertical = /top|bottom/.test(placement) + var arrowDelta = isVertical ? delta.left * 2 - width + actualWidth : delta.top * 2 - height + actualHeight + var arrowOffsetPosition = isVertical ? 'offsetWidth' : 'offsetHeight' $tip.offset(offset) - this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], arrowPosition) + this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], isVertical) } - Tooltip.prototype.replaceArrow = function (delta, dimension, position) { - this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + '%') : '') + Tooltip.prototype.replaceArrow = function (delta, dimension, isHorizontal) { + this.arrow() + .css(isHorizontal ? 'left' : 'top', 50 * (1 - delta / dimension) + '%') + .css(isHorizontal ? 'top' : 'left', '') } Tooltip.prototype.setContent = function () {