Compare tooltip right offset to viewport right offset (and not width)

Closes #16142 by merging it.

diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index 2c492a92bb26f381eda269240ec637ee1491fc95..711eba8ec0b30361e81bbfab9c0e64de1928f4b1 100644 (file)
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -764,6 +764,33 @@ $(function () {
     $styles.remove()
   })
 
+  QUnit.test('should not misplace the tip when the right edge offset is greater or equal than the viewport width', function (assert) {
+    assert.expect(2)
+    var styles = '<style>'
+        + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
+        + '.tooltip, .tooltip .tooltip-inner { width: 50px; height: 50px; max-width: none; background: red; }'
+        + '.container-viewport { padding: 100px; margin-left: 100px; width: 100px; }'
+        + '</style>'
+    var $styles = $(styles).appendTo('head')
+
+    var $container = $('<div class="container-viewport"/>').appendTo(document.body)
+    var $target = $('<a href="#" rel="tooltip" title="tip">foobar</a>')
+      .appendTo($container)
+      .bootstrapTooltip({
+        viewport: '.container-viewport'
+      })
+
+    $target.bootstrapTooltip('show')
+    var $tooltip = $container.find('.tooltip')
+    assert.strictEqual(Math.round($tooltip.offset().left), Math.round($target.position().left + $target.width() / 2 - $tooltip[0].offsetWidth / 2))
+
+    $target.bootstrapTooltip('hide')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
+
+    $container.remove()
+    $styles.remove()
+  })
+
   QUnit.test('should not error when trying to show an auto-placed tooltip that has been removed from the dom', function (assert) {
     assert.expect(1)
     var passed = true

diff --git a/js/tooltip.js b/js/tooltip.js
index 2d42cab24c9d0396de7e1800e7dec32fc9e01d51..1f66413d806398f61a0a5bb1b941c981ec4af55e 100644 (file)
--- a/js/tooltip.js
+++ b/js/tooltip.js
@@ -378,7 +378,7 @@
       var rightEdgeOffset = pos.left + viewportPadding + actualWidth
       if (leftEdgeOffset < viewportDimensions.left) { // left overflow
         delta.left = viewportDimensions.left - leftEdgeOffset
-      } else if (rightEdgeOffset > viewportDimensions.width) { // right overflow
+      } else if (rightEdgeOffset > viewportDimensions.right) { // right overflow
         delta.left = viewportDimensions.left + viewportDimensions.width - rightEdgeOffset
       }
     }