diff --git a/js/tests/index.html b/js/tests/index.html index 976ca16872b62aefd2af4b444429e4aabef4eab7..e9ad01d67a6923a2960af4568a8f0fffad8fd959 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 0000000000000000000000000000000000000000..8614e60d7d01ccbca76c899adec161eb9bf86e92 --- /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 94f40f339f60c0fdaf1057f534430bf05836c6e5..49c034e2ff931aa121cbdacf15b17d2b445904f9 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) + }) })