From db9e8ee813d13546acc9663970c810c230ed026c Mon Sep 17 00:00:00 2001
From: "saranya.r" <saranya.r@zohocorp.com>
Date: Tue, 9 Sep 2014 18:47:06 +0530
Subject: [PATCH] Fix tooltip misplacement with "auto top"
Fixes #14322.
Closes #14581.
---
js/tests/unit/tooltip.js | 50 ++++++++++++++++++++++++++++++++++++++++
js/tooltip.js | 2 +-
2 files changed, 51 insertions(+), 1 deletion(-)
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index c75924e9ff..cd239f0c6c 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -382,6 +382,56 @@ $(function () {
$style.remove()
})
+ test('should position tip on top if viewport has enough space and placement is "auto top"', function () {
+ var styles = '<style>'
+ + 'body { padding-top: 100px; }'
+ + 'section { height: 300px; border: 1px solid red; padding-top: 50px }'
+ + 'div[rel="tooltip"] { width: 150px; border: 1px solid blue; }'
+ + '</style>'
+ var $styles = $(styles).appendTo('head')
+
+ var $container = $('<section/>').appendTo('#qunit-fixture')
+ var $target = $('<div rel="tooltip" title="tip"/>')
+ .appendTo($container)
+ .bootstrapTooltip({
+ placement: 'auto top',
+ viewport: 'section'
+ })
+
+ $target.bootstrapTooltip('show')
+ ok($('.tooltip').is('.top'), 'top positioned tooltip is dynamically positioned to top')
+
+ $target.bootstrapTooltip('hide')
+ equal($('.tooltip').length, 0, 'tooltip removed from dom')
+
+ $styles.remove()
+ })
+
+ test('should position tip on bottom if the tip\'s dimension exceeds the viewport area and placement is "auto top"', function () {
+ var styles = '<style>'
+ + 'body { padding-top: 100px; }'
+ + 'section { height: 300px; border: 1px solid red; }'
+ + 'div[rel="tooltip"] { width: 150px; border: 1px solid blue; }'
+ + '</style>'
+ var $styles = $(styles).appendTo('head')
+
+ var $container = $('<section/>').appendTo('#qunit-fixture')
+ var $target = $('<div rel="tooltip" title="tip"/>')
+ .appendTo($container)
+ .bootstrapTooltip({
+ placement: 'auto top',
+ viewport: 'section'
+ })
+
+ $target.bootstrapTooltip('show')
+ ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom')
+
+ $target.bootstrapTooltip('hide')
+ equal($('.tooltip').length, 0, 'tooltip removed from dom')
+
+ $styles.remove()
+ })
+
test('should adjust the tip\'s top position when up against the top of the viewport', function () {
var styles = '<style>'
+ '.tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
diff --git a/js/tooltip.js b/js/tooltip.js
index 7194b5d01a..9932c0b18c 100644
--- a/js/tooltip.js
+++ b/js/tooltip.js
@@ -192,7 +192,7 @@
var parentDim = this.getPosition($parent)
placement = placement == 'bottom' && pos.top + pos.height + actualHeight - parentDim.scroll > parentDim.height ? 'top' :
- placement == 'top' && pos.top - parentDim.scroll - actualHeight < 0 ? 'bottom' :
+ placement == 'top' && pos.top - parentDim.scroll - actualHeight < parentDim.top ? 'bottom' :
placement == 'right' && pos.right + actualWidth > parentDim.width ? 'left' :
placement == 'left' && pos.left - actualWidth < parentDim.left ? 'right' :
placement
--
GitLab