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 () {