diff options
| author | Mark Otto <[email protected]> | 2014-08-02 18:30:59 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-08-02 18:30:59 -0700 |
| commit | 089d434895fbe901d838e4dfb29cdb5941c47ab6 (patch) | |
| tree | dac25fa32c4420bfb3b1199c61898f04b71eaebe /js/tests/unit/tooltip.js | |
| parent | f200c39657c5011e12bace716c59b2242d48c077 (diff) | |
| parent | 033f1654b07f7764a54e5b290e5cf36f688b95a3 (diff) | |
| download | bootstrap-089d434895fbe901d838e4dfb29cdb5941c47ab6.tar.xz bootstrap-089d434895fbe901d838e4dfb29cdb5941c47ab6.zip | |
Merge branch 'master' into derp
Conflicts:
_config.yml
dist/css/bootstrap-theme.css.map
dist/css/bootstrap.css
dist/css/bootstrap.css.map
dist/css/bootstrap.min.css
docs/_includes/components/glyphicons.html
docs/_includes/css/forms.html
docs/_includes/css/tables.html
docs/_includes/getting-started/browser-device-support.html
docs/_includes/header.html
docs/_includes/js/affix.html
docs/_includes/js/alerts.html
docs/_includes/js/buttons.html
docs/_includes/js/dropdowns.html
docs/_includes/js/overview.html
docs/_includes/js/popovers.html
docs/_includes/js/tooltips.html
docs/_includes/nav/javascript.html
docs/assets/css/docs.min.css
docs/assets/css/src/docs.css
docs/assets/js/customize.min.js
docs/assets/js/docs.min.js
docs/assets/js/raw-files.min.js
docs/browser-bugs.html
docs/dist/css/bootstrap-theme.css.map
docs/dist/css/bootstrap.css
docs/dist/css/bootstrap.css.map
docs/dist/css/bootstrap.min.css
docs/examples/blog/index.html
docs/examples/carousel/index.html
docs/examples/cover/index.html
docs/examples/dashboard/index.html
docs/examples/grid/index.html
docs/examples/jumbotron-narrow/index.html
docs/examples/jumbotron/index.html
docs/examples/justified-nav/index.html
docs/examples/navbar-fixed-top/index.html
docs/examples/navbar-static-top/index.html
docs/examples/navbar/index.html
docs/examples/non-responsive/index.html
docs/examples/offcanvas/index.html
docs/examples/signin/index.html
docs/examples/starter-template/index.html
docs/examples/sticky-footer-navbar/index.html
docs/examples/sticky-footer/index.html
docs/examples/theme/index.html
docs/examples/tooltip-viewport/index.html
less/code.less
less/panels.less
less/variables.less
Diffstat (limited to 'js/tests/unit/tooltip.js')
| -rw-r--r-- | js/tests/unit/tooltip.js | 442 |
1 files changed, 239 insertions, 203 deletions
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index 6871f538e..7896c2c96 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -202,134 +202,6 @@ $(function () { .bootstrapTooltip('show') }) - test('should not show tooltip if leave event occurs before delay expires', function () { - stop() - - var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') - .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: 200 }) - - setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in') - $tooltip.trigger('mouseout') - }, 100) - - setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), '300ms: tooltip not faded in') - start() - }, 300) - - $tooltip.trigger('mouseenter') - }) - - test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function () { - stop() - - var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') - .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: { show: 200, hide: 0 }}) - - setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in') - $tooltip.trigger('mouseout') - }, 100) - - setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), '300ms: tooltip not faded in') - start() - }, 300) - - $tooltip.trigger('mouseenter') - }) - - test('should wait 200 ms before hiding the tooltip', function () { - stop() - - var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') - .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: { show: 0, hide: 200 }}) - - setTimeout(function () { - ok($('.tooltip').is('.fade.in'), '1ms: tooltip faded in') - $tooltip.trigger('mouseout') - }, 1) - - setTimeout(function () { - ok($('.tooltip').is('.fade.in'), '100ms: tooltip still faded in') - }, 100) - - setTimeout(function () { - ok(!$('.tooltip').is('.in'), '250ms: tooltip removed') - start() - }, 250) - - $tooltip.trigger('mouseenter') - }) - - test('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', function () { - stop() - - var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') - .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: { show: 0, hide: 200 }}) - - setTimeout(function () { - ok($('.tooltip').is('.fade.in'), '1ms: tooltip faded in') - $tooltip.trigger('mouseout') - }, 1) - - setTimeout(function () { - ok($('.tooltip').is('.fade.in'), '100ms: tooltip still faded in') - $tooltip.trigger('mouseenter') - }, 100) - - setTimeout(function () { - ok($('.tooltip').is('.fade.in'), '250ms: tooltip still faded in') - start() - }, 250) - - $tooltip.trigger('mouseenter') - }) - - test('should not show tooltip if leave event occurs before delay expires', function () { - stop() - - var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') - .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: 100 }) - - setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), '50ms: tooltip not faded in') - $tooltip.trigger('mouseout') - }, 50) - - setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in') - start() - }, 100) - - $tooltip.trigger('mouseenter') - }) - - test('should show tooltip if leave event hasn\'t occured before delay expires', function () { - stop() - - var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') - .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: 150 }) - - setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip is not faded in') - }, 100) - - setTimeout(function () { - ok($('.tooltip').is('.fade.in'), '200ms: tooltip is faded in') - start() - }, 200) - - $tooltip.trigger('mouseenter') - }) - test('should destroy tooltip', function () { var $tooltip = $('<div/>') .bootstrapTooltip() @@ -395,76 +267,6 @@ $(function () { equal($('body > .tooltip').length, 0, 'tooltip was removed from dom') }) - test('should place tooltip inside viewport', function () { - stop() - - var $container = $('<div/>') - .css({ - position: 'absolute', - width: 200, - height: 200, - bottom: 0, - left: 0 - }) - .appendTo(document.body) - - $('<a href="#" title="Very very very very very very very very long tooltip">Hover me</a>') - .css({ - position: 'absolute', - top: 0, - left: 0 - }) - .appendTo($container) - .bootstrapTooltip({ - placement: 'top', - animate: false - }) - .bootstrapTooltip('show') - - setTimeout(function () { - ok($('.tooltip').offset().left >= 0) - $container.remove() - start() - }, 100) - }) - - test('should place tooltip on top of element', function () { - stop() - - var containerHTML = '<div>' - + '<p style="margin-top: 200px">' - + '<a href="#" title="very very very very very very very long tooltip">Hover me</a>' - + '</p>' - + '</div>' - var $container = $(containerHTML) - .css({ - position: 'absolute', - bottom: 0, - left: 0, - textAlign: 'right', - width: 300, - height: 300 - }) - .appendTo(document.body) - - var $trigger = $container - .find('a') - .css('margin-top', 200) - .bootstrapTooltip({ - placement: 'top', - animate: false - }) - .bootstrapTooltip('show') - - var $tooltip = $container.find('.tooltip') - - setTimeout(function () { - ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($trigger.offset().top)) - $container.remove() - start() - }, 100) - }) - test('should add position class before positioning so that position-specific styles are taken into account', function () { var styles = '<style>' + '.tooltip.right { white-space: nowrap; }' @@ -472,7 +274,7 @@ $(function () { + '</style>' var $styles = $(styles).appendTo('head') - var $container = $('<div/>').appendTo(document.body) + var $container = $('<div/>').appendTo('#qunit-fixture') var $target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>') .appendTo($container) .bootstrapTooltip({ @@ -587,7 +389,7 @@ $(function () { + '</style>' var $styles = $(styles).appendTo('head') - var $container = $('<div/>').appendTo(document.body) + var $container = $('<div/>').appendTo('#qunit-fixture') var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;"/>') .appendTo($container) .bootstrapTooltip({ @@ -604,7 +406,6 @@ $(function () { $target.bootstrapTooltip('hide') equal($('.tooltip').length, 0, 'tooltip removed from dom') - $container.remove() $styles.remove() }) @@ -615,7 +416,7 @@ $(function () { + '</style>' var $styles = $(styles).appendTo('head') - var $container = $('<div/>').appendTo(document.body) + var $container = $('<div/>').appendTo('#qunit-fixture') var $target = $('<a href="#" rel="tooltip" title="tip" style="bottom: 0px; left: 0px;"/>') .appendTo($container) .bootstrapTooltip({ @@ -644,7 +445,7 @@ $(function () { + '</style>' var $styles = $(styles).appendTo('head') - var $container = $('<div/>').appendTo(document.body) + var $container = $('<div/>').appendTo('#qunit-fixture') var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;"/>') .appendTo($container) .bootstrapTooltip({ @@ -739,4 +540,239 @@ $(function () { ok(passed, '.tooltip(\'show\') should not throw an error if element no longer is in dom') }) + + test('should place tooltip on top of element', function () { + stop() + + var containerHTML = '<div>' + + '<p style="margin-top: 200px">' + + '<a href="#" title="very very very very very very very long tooltip">Hover me</a>' + + '</p>' + + '</div>' + + var $container = $(containerHTML) + .css({ + position: 'absolute', + bottom: 0, + left: 0, + textAlign: 'right', + width: 300, + height: 300 + }) + .appendTo('#qunit-fixture') + + var $trigger = $container + .find('a') + .css('margin-top', 200) + .bootstrapTooltip({ + placement: 'top', + animate: false + }) + .bootstrapTooltip('show') + + var $tooltip = $container.find('.tooltip') + + setTimeout(function () { + ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($trigger.offset().top)) + start() + }, 0) + }) + + test('should place tooltip inside viewport', function () { + stop() + + var $container = $('<div/>') + .css({ + position: 'absolute', + width: 200, + height: 200, + bottom: 0, + left: 0 + }) + .appendTo('#qunit-fixture') + + $('<a href="#" title="Very very very very very very very very long tooltip">Hover me</a>') + .css({ + position: 'absolute', + top: 0, + left: 0 + }) + .appendTo($container) + .bootstrapTooltip({ + placement: 'top' + }) + .bootstrapTooltip('show') + + setTimeout(function () { + ok($('.tooltip').offset().left >= 0) + start() + }, 0) + }) + + test('should show tooltip if leave event hasn\'t occured before delay expires', function () { + stop() + + var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') + .appendTo('#qunit-fixture') + .bootstrapTooltip({ delay: 15 }) + + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), '10ms: tooltip is not faded in') + }, 10) + + setTimeout(function () { + ok($('.tooltip').is('.fade.in'), '20ms: tooltip is faded in') + start() + }, 20) + + $tooltip.trigger('mouseenter') + }) + + test('should not show tooltip if leave event occurs before delay expires', function () { + stop() + + var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') + .appendTo('#qunit-fixture') + .bootstrapTooltip({ delay: 15 }) + + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), '10ms: tooltip not faded in') + $tooltip.trigger('mouseout') + }, 10) + + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), '20ms: tooltip not faded in') + start() + }, 20) + + $tooltip.trigger('mouseenter') + }) + + test('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', function () { + stop() + + var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') + .appendTo('#qunit-fixture') + .bootstrapTooltip({ delay: { show: 0, hide: 15 }}) + + setTimeout(function () { + ok($('.tooltip').is('.fade.in'), '1ms: tooltip faded in') + $tooltip.trigger('mouseout') + + setTimeout(function () { + ok($('.tooltip').is('.fade.in'), '10ms: tooltip still faded in') + $tooltip.trigger('mouseenter') + }, 10) + + setTimeout(function () { + ok($('.tooltip').is('.fade.in'), '20ms: tooltip still faded in') + start() + }, 20) + }, 0) + + $tooltip.trigger('mouseenter') + }) + + test('should not show tooltip if leave event occurs before delay expires', function () { + stop() + + var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') + .appendTo('#qunit-fixture') + .bootstrapTooltip({ delay: 15 }) + + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), '10ms: tooltip not faded in') + $tooltip.trigger('mouseout') + }, 10) + + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), '20ms: tooltip not faded in') + start() + }, 20) + + $tooltip.trigger('mouseenter') + }) + + test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function () { + stop() + + var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') + .appendTo('#qunit-fixture') + .bootstrapTooltip({ delay: { show: 15, hide: 0 }}) + + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), '10ms: tooltip not faded in') + $tooltip.trigger('mouseout') + }, 10) + + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), '25ms: tooltip not faded in') + start() + }, 25) + + $tooltip.trigger('mouseenter') + }) + + test('should wait 20ms before hiding the tooltip', function () { + stop() + + var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') + .appendTo('#qunit-fixture') + .bootstrapTooltip({ delay: { show: 0, hide: 15 }}) + + setTimeout(function () { + ok($tooltip.data('bs.tooltip').$tip.is('.fade.in'), '1ms: tooltip faded in') + + $tooltip.trigger('mouseout') + + setTimeout(function () { + ok($tooltip.data('bs.tooltip').$tip.is('.fade.in'), '10ms: tooltip still faded in') + }, 10) + + setTimeout(function () { + ok(!$tooltip.data('bs.tooltip').$tip.is('.in'), '20ms: tooltip removed') + start() + }, 20) + + }, 0) + + $tooltip.trigger('mouseenter') + }) + + test('should correctly position tooltips on SVG elements', function () { + if (!window.SVGElement) { + // Skip IE8 since it doesn't support SVG + expect(0) + return + } + + stop() + + var styles = '<style>' + + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }' + + '.tooltip { position: absolute; }' + + '.tooltip .tooltip-inner { width: 24px; height: 24px; font-family: Helvetica; }' + + '</style>' + var $styles = $(styles).appendTo('head') + + $('#qunit-fixture').append( + '<div style="position: fixed; top: 0; left: 0;">' + + ' <svg width="200" height="200">' + + ' <circle cx="100" cy="100" r="10" title="m" id="theCircle" />' + + ' </svg>' + + '</div>') + var $circle = $('#theCircle') + + $circle + .on('shown.bs.tooltip', function () { + var offset = $('.tooltip').offset() + $styles.remove() + ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location') + start() + }) + .bootstrapTooltip({ container: 'body', placement: 'top', trigger: 'manual' }) + + $circle.bootstrapTooltip('show') + }) + }) |
