Test for replacing tooltip when resized

3 files changed, 44 insertions, 6 deletions

diff --git a/js/tests/index.html b/js/tests/index.html
index 976ca16872..e9ad01d67a 100644
--- a/js/tests/index.html
+++ b/js/tests/index.html
@@ -29,6 +29,9 @@
   <script src="../../js/bootstrap-typeahead.js"></script>
   <script src="../../js/bootstrap-affix.js"></script>
 
+  <!-- Needed for testing -->
+  <link rel="stylesheet" type="text/css" href="unit/bootstrap-tooltip.css" />
+
   <!-- unit tests -->
   <script src="unit/bootstrap-transition.js"></script>
   <script src="unit/bootstrap-alert.js"></script>
diff --git a/js/tests/unit/bootstrap-tooltip.css b/js/tests/unit/bootstrap-tooltip.css
new file mode 100644
index 0000000000..8614e60d7d
--- /dev/null
+++ b/js/tests/unit/bootstrap-tooltip.css
@@ -0,0 +1,13 @@
+
+
+.tooltip{
+	position: absolute;
+}
+
+.tooltip-inner{
+	max-width: 200px;
+}
+
+.tooltip.top .tooltip-arrow{
+	position: absolute;
+}
\ No newline at end of file
diff --git a/js/tests/unit/bootstrap-tooltip.js b/js/tests/unit/bootstrap-tooltip.js
index 94f40f339f..49c034e2ff 100644
--- a/js/tests/unit/bootstrap-tooltip.js
+++ b/js/tests/unit/bootstrap-tooltip.js
@@ -253,11 +253,12 @@ $(function () {
       })
 
       test("should place tooltip inside window", function(){
-        $("#qunit-fixture").show();
-        var tooltip = $("<a href='#' title='Very very very very very very very very long tooltip'></a>")
+        var container = $("<div />").appendTo("body")
+            .css({position: "absolute", width: 200, height: 200, bottom: 0, left: 0})
+          , tooltip = $("<a href='#' title='Very very very very very very very very long tooltip'>Hover me</a>")
           .css({position: "absolute", top:0, left: 0})
-          .appendTo("#qunit-fixture")
-          .tooltip({placement: "top"})
+          .appendTo(container)
+          .tooltip({placement: "top", animate: false})
           .tooltip("show");
 
         stop();
@@ -266,7 +267,28 @@ $(function () {
           ok($(".tooltip").offset().left >= 0);
 
           start();
-          $("#qunit-fixture").hide();
-        }, 200)
+          container.remove();
+        }, 100)
       });
+
+      test("should place tooltip on top of element", function(){
+        var container = $("<div />").appendTo("body")
+              .css({position: "absolute", bottom: 0, left: 0, textAlign: "right", width: 300, height: 300})
+            , p = $("<p style='margin-top:200px' />").appendTo(container)
+            , tooltiped = $("<a href='#' title='very very very very very very very long tooltip'>Hover me</a>")
+              .css({marginTop: 200})
+              .appendTo(p)
+              .tooltip({placement: "top", animate: false})
+              .tooltip("show");
+
+        stop();
+
+        setTimeout(function(){
+          var tooltip = container.find(".tooltip");
+
+          start();
+          ok(tooltip.offset().top + tooltip.outerHeight() <= tooltiped.offset().top);
+          container.remove();
+        }, 100)
+      })
 })