1 $(function () { |
|
2 |
|
3 module("tooltip") |
|
4 |
|
5 test("should provide no conflict", function () { |
|
6 var tooltip = $.fn.tooltip.noConflict() |
|
7 ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)') |
|
8 $.fn.tooltip = tooltip |
|
9 }) |
|
10 |
|
11 test("should be defined on jquery object", function () { |
|
12 var div = $("<div></div>") |
|
13 ok(div.tooltip, 'popover method is defined') |
|
14 }) |
|
15 |
|
16 test("should return element", function () { |
|
17 var div = $("<div></div>") |
|
18 ok(div.tooltip() == div, 'document.body returned') |
|
19 }) |
|
20 |
|
21 test("should expose default settings", function () { |
|
22 ok(!!$.fn.tooltip.Constructor.DEFAULTS, 'defaults is defined') |
|
23 }) |
|
24 |
|
25 test("should empty title attribute", function () { |
|
26 var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip() |
|
27 ok(tooltip.attr('title') === '', 'title attribute was emptied') |
|
28 }) |
|
29 |
|
30 test("should add data attribute for referencing original title", function () { |
|
31 var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip() |
|
32 equal(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute') |
|
33 }) |
|
34 |
|
35 test("should place tooltips relative to placement option", function () { |
|
36 $.support.transition = false |
|
37 var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') |
|
38 .appendTo('#qunit-fixture') |
|
39 .tooltip({placement: 'bottom'}) |
|
40 .tooltip('show') |
|
41 |
|
42 ok($(".tooltip").is('.fade.bottom.in'), 'has correct classes applied') |
|
43 tooltip.tooltip('hide') |
|
44 }) |
|
45 |
|
46 test("should allow html entities", function () { |
|
47 $.support.transition = false |
|
48 var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>') |
|
49 .appendTo('#qunit-fixture') |
|
50 .tooltip({html: true}) |
|
51 .tooltip('show') |
|
52 |
|
53 ok($('.tooltip b').length, 'b tag was inserted') |
|
54 tooltip.tooltip('hide') |
|
55 ok(!$(".tooltip").length, 'tooltip removed') |
|
56 }) |
|
57 |
|
58 test("should respect custom classes", function () { |
|
59 var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') |
|
60 .appendTo('#qunit-fixture') |
|
61 .tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'}) |
|
62 .tooltip('show') |
|
63 |
|
64 ok($('.tooltip').hasClass('some-class'), 'custom class is present') |
|
65 tooltip.tooltip('hide') |
|
66 ok(!$(".tooltip").length, 'tooltip removed') |
|
67 }) |
|
68 |
|
69 test("should fire show event", function () { |
|
70 stop() |
|
71 var tooltip = $('<div title="tooltip title"></div>') |
|
72 .on("show.bs.tooltip", function() { |
|
73 ok(true, "show was called") |
|
74 start() |
|
75 }) |
|
76 .tooltip('show') |
|
77 }) |
|
78 |
|
79 test("should fire shown event", function () { |
|
80 stop() |
|
81 var tooltip = $('<div title="tooltip title"></div>') |
|
82 .on("shown.bs.tooltip", function() { |
|
83 ok(true, "shown was called") |
|
84 start() |
|
85 }) |
|
86 .tooltip('show') |
|
87 }) |
|
88 |
|
89 test("should not fire shown event when default prevented", function () { |
|
90 stop() |
|
91 var tooltip = $('<div title="tooltip title"></div>') |
|
92 .on("show.bs.tooltip", function(e) { |
|
93 e.preventDefault() |
|
94 ok(true, "show was called") |
|
95 start() |
|
96 }) |
|
97 .on("shown.bs.tooltip", function() { |
|
98 ok(false, "shown was called") |
|
99 }) |
|
100 .tooltip('show') |
|
101 }) |
|
102 |
|
103 test("should fire hide event", function () { |
|
104 stop() |
|
105 var tooltip = $('<div title="tooltip title"></div>') |
|
106 .on("shown.bs.tooltip", function() { |
|
107 $(this).tooltip('hide') |
|
108 }) |
|
109 .on("hide.bs.tooltip", function() { |
|
110 ok(true, "hide was called") |
|
111 start() |
|
112 }) |
|
113 .tooltip('show') |
|
114 }) |
|
115 |
|
116 test("should fire hidden event", function () { |
|
117 stop() |
|
118 var tooltip = $('<div title="tooltip title"></div>') |
|
119 .on("shown.bs.tooltip", function() { |
|
120 $(this).tooltip('hide') |
|
121 }) |
|
122 .on("hidden.bs.tooltip", function() { |
|
123 ok(true, "hidden was called") |
|
124 start() |
|
125 }) |
|
126 .tooltip('show') |
|
127 }) |
|
128 |
|
129 test("should not fire hidden event when default prevented", function () { |
|
130 stop() |
|
131 var tooltip = $('<div title="tooltip title"></div>') |
|
132 .on("shown.bs.tooltip", function() { |
|
133 $(this).tooltip('hide') |
|
134 }) |
|
135 .on("hide.bs.tooltip", function(e) { |
|
136 e.preventDefault() |
|
137 ok(true, "hide was called") |
|
138 start() |
|
139 }) |
|
140 .on("hidden.bs.tooltip", function() { |
|
141 ok(false, "hidden was called") |
|
142 }) |
|
143 .tooltip('show') |
|
144 }) |
|
145 |
|
146 test("should not show tooltip if leave event occurs before delay expires", function () { |
|
147 var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') |
|
148 .appendTo('#qunit-fixture') |
|
149 .tooltip({ delay: 200 }) |
|
150 |
|
151 stop() |
|
152 |
|
153 tooltip.trigger('mouseenter') |
|
154 |
|
155 setTimeout(function () { |
|
156 ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') |
|
157 tooltip.trigger('mouseout') |
|
158 setTimeout(function () { |
|
159 ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') |
|
160 start() |
|
161 }, 200) |
|
162 }, 100) |
|
163 }) |
|
164 |
|
165 test("should not show tooltip if leave event occurs before delay expires, even if hide delay is 0", function () { |
|
166 var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') |
|
167 .appendTo('#qunit-fixture') |
|
168 .tooltip({ delay: { show: 200, hide: 0} }) |
|
169 |
|
170 stop() |
|
171 |
|
172 tooltip.trigger('mouseenter') |
|
173 |
|
174 setTimeout(function () { |
|
175 ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') |
|
176 tooltip.trigger('mouseout') |
|
177 setTimeout(function () { |
|
178 ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') |
|
179 start() |
|
180 }, 200) |
|
181 }, 100) |
|
182 }) |
|
183 |
|
184 test("should wait 200 ms before hiding the tooltip", 3, function () { |
|
185 var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') |
|
186 .appendTo('#qunit-fixture') |
|
187 .tooltip({ delay: { show: 0, hide: 200} }) |
|
188 |
|
189 stop() |
|
190 |
|
191 tooltip.trigger('mouseenter') |
|
192 |
|
193 setTimeout(function () { |
|
194 ok($(".tooltip").is('.fade.in'), 'tooltip is faded in') |
|
195 tooltip.trigger('mouseout') |
|
196 setTimeout(function () { |
|
197 ok($(".tooltip").is('.fade.in'), '100ms:tooltip is still faded in') |
|
198 setTimeout(function () { |
|
199 ok(!$(".tooltip").is('.in'), 'tooltip removed') |
|
200 start() |
|
201 }, 150) |
|
202 }, 100) |
|
203 }, 1) |
|
204 }) |
|
205 |
|
206 test("should not hide tooltip if leave event occurs, then tooltip is show immediately again", function () { |
|
207 var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') |
|
208 .appendTo('#qunit-fixture') |
|
209 .tooltip({ delay: { show: 0, hide: 200} }) |
|
210 |
|
211 stop() |
|
212 |
|
213 tooltip.trigger('mouseenter') |
|
214 |
|
215 setTimeout(function () { |
|
216 ok($(".tooltip").is('.fade.in'), 'tooltip is faded in') |
|
217 tooltip.trigger('mouseout') |
|
218 setTimeout(function () { |
|
219 ok($(".tooltip").is('.fade.in'), '100ms:tooltip is still faded in') |
|
220 tooltip.trigger('mouseenter') |
|
221 setTimeout(function () { |
|
222 ok($(".tooltip").is('.in'), 'tooltip removed') |
|
223 start() |
|
224 }, 150) |
|
225 }, 100) |
|
226 }, 1) |
|
227 }) |
|
228 |
|
229 test("should not show tooltip if leave event occurs before delay expires", function () { |
|
230 var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') |
|
231 .appendTo('#qunit-fixture') |
|
232 .tooltip({ delay: 100 }) |
|
233 stop() |
|
234 tooltip.trigger('mouseenter') |
|
235 setTimeout(function () { |
|
236 ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') |
|
237 tooltip.trigger('mouseout') |
|
238 setTimeout(function () { |
|
239 ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') |
|
240 start() |
|
241 }, 100) |
|
242 }, 50) |
|
243 }) |
|
244 |
|
245 test("should show tooltip if leave event hasn't occured before delay expires", function () { |
|
246 var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') |
|
247 .appendTo('#qunit-fixture') |
|
248 .tooltip({ delay: 150 }) |
|
249 stop() |
|
250 tooltip.trigger('mouseenter') |
|
251 setTimeout(function () { |
|
252 ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in') |
|
253 }, 100) |
|
254 setTimeout(function () { |
|
255 ok($(".tooltip").is('.fade.in'), 'tooltip has faded in') |
|
256 start() |
|
257 }, 200) |
|
258 }) |
|
259 |
|
260 test("should destroy tooltip", function () { |
|
261 var tooltip = $('<div/>').tooltip().on('click.foo', function(){}) |
|
262 ok(tooltip.data('bs.tooltip'), 'tooltip has data') |
|
263 ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event') |
|
264 ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event') |
|
265 tooltip.tooltip('show') |
|
266 tooltip.tooltip('destroy') |
|
267 ok(!tooltip.hasClass('in'), 'tooltip is hidden') |
|
268 ok(!$._data(tooltip[0], 'bs.tooltip'), 'tooltip does not have data') |
|
269 ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip still has click.foo') |
|
270 ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events') |
|
271 }) |
|
272 |
|
273 test("should show tooltip with delegate selector on click", function () { |
|
274 var div = $('<div><a href="#" rel="tooltip" title="Another tooltip"></a></div>') |
|
275 var tooltip = div.appendTo('#qunit-fixture') |
|
276 .tooltip({ selector: 'a[rel=tooltip]', |
|
277 trigger: 'click' }) |
|
278 div.find('a').trigger('click') |
|
279 ok($(".tooltip").is('.fade.in'), 'tooltip is faded in') |
|
280 }) |
|
281 |
|
282 test("should show tooltip when toggle is called", function () { |
|
283 var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle"></a>') |
|
284 .appendTo('#qunit-fixture') |
|
285 .tooltip({trigger: 'manual'}) |
|
286 .tooltip('toggle') |
|
287 ok($(".tooltip").is('.fade.in'), 'tooltip should be toggled in') |
|
288 }) |
|
289 |
|
290 test("should place tooltips inside the body", function () { |
|
291 var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') |
|
292 .appendTo('#qunit-fixture') |
|
293 .tooltip({container:'body'}) |
|
294 .tooltip('show') |
|
295 ok($("body > .tooltip").length, 'inside the body') |
|
296 ok(!$("#qunit-fixture > .tooltip").length, 'not found in parent') |
|
297 tooltip.tooltip('hide') |
|
298 }) |
|
299 |
|
300 test("should place tooltip inside window", function(){ |
|
301 var container = $("<div />").appendTo("body") |
|
302 .css({position: "absolute", width: 200, height: 200, bottom: 0, left: 0}) |
|
303 , tooltip = $("<a href='#' title='Very very very very very very very very long tooltip'>Hover me</a>") |
|
304 .css({position: "absolute", top:0, left: 0}) |
|
305 .appendTo(container) |
|
306 .tooltip({placement: "top", animate: false}) |
|
307 .tooltip("show") |
|
308 |
|
309 stop() |
|
310 |
|
311 setTimeout(function(){ |
|
312 ok($(".tooltip").offset().left >= 0) |
|
313 |
|
314 start() |
|
315 container.remove() |
|
316 }, 100) |
|
317 }) |
|
318 |
|
319 test("should place tooltip on top of element", function(){ |
|
320 var container = $("<div />").appendTo("body") |
|
321 .css({position: "absolute", bottom: 0, left: 0, textAlign: "right", width: 300, height: 300}) |
|
322 , p = $("<p style='margin-top:200px' />").appendTo(container) |
|
323 , tooltiped = $("<a href='#' title='very very very very very very very long tooltip'>Hover me</a>") |
|
324 .css({marginTop: 200}) |
|
325 .appendTo(p) |
|
326 .tooltip({placement: "top", animate: false}) |
|
327 .tooltip("show") |
|
328 |
|
329 stop() |
|
330 |
|
331 setTimeout(function(){ |
|
332 var tooltip = container.find(".tooltip") |
|
333 |
|
334 start() |
|
335 ok(tooltip.offset().top + tooltip.outerHeight() <= tooltiped.offset().top) |
|
336 container.remove() |
|
337 }, 100) |
|
338 }) |
|
339 |
|
340 test("should add position class before positioning so that position-specific styles are taken into account", function(){ |
|
341 $("head").append('<style> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>') |
|
342 |
|
343 var container = $("<div />").appendTo("body") |
|
344 , target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"></a>') |
|
345 .appendTo(container) |
|
346 .tooltip({placement: 'right'}) |
|
347 .tooltip('show') |
|
348 , tooltip = container.find(".tooltip") |
|
349 |
|
350 ok( Math.round(target.offset().top + target[0].offsetHeight/2 - tooltip[0].offsetHeight/2) === Math.round(tooltip.offset().top) ) |
|
351 target.tooltip('hide') |
|
352 }) |
|
353 |
|
354 test("tooltip title test #1", function () { |
|
355 var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>') |
|
356 .appendTo('#qunit-fixture') |
|
357 .tooltip({ |
|
358 }) |
|
359 .tooltip('show') |
|
360 equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set') |
|
361 tooltip.tooltip('hide') |
|
362 ok(!$(".tooltip").length, 'tooltip removed') |
|
363 }) |
|
364 |
|
365 test("tooltip title test #2", function () { |
|
366 var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>') |
|
367 .appendTo('#qunit-fixture') |
|
368 .tooltip({ |
|
369 title: 'This is a tooltip with some content' |
|
370 }) |
|
371 .tooltip('show') |
|
372 equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while prefered over title option') |
|
373 tooltip.tooltip('hide') |
|
374 ok(!$(".tooltip").length, 'tooltip removed') |
|
375 }) |
|
376 |
|
377 test("tooltip title test #3", function () { |
|
378 var tooltip = $('<a href="#" rel="tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>') |
|
379 .appendTo('#qunit-fixture') |
|
380 .tooltip({ |
|
381 title: 'This is a tooltip with some content' |
|
382 }) |
|
383 .tooltip('show') |
|
384 equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set') |
|
385 tooltip.tooltip('hide') |
|
386 ok(!$(".tooltip").length, 'tooltip removed') |
|
387 }) |
|
388 |
|
389 test("tooltips should be placed dynamically, with the dynamic placement option", function () { |
|
390 $.support.transition = false |
|
391 var ttContainer = $('<div id="dynamic-tt-test"/>').css({ |
|
392 'height' : 400 |
|
393 , 'overflow' : 'hidden' |
|
394 , 'position' : 'absolute' |
|
395 , 'top' : 0 |
|
396 , 'left' : 0 |
|
397 , 'width' : 600}) |
|
398 .appendTo('body') |
|
399 |
|
400 var topTooltip = $('<div style="display: inline-block; position: absolute; left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>') |
|
401 .appendTo('#dynamic-tt-test') |
|
402 .tooltip({placement: 'auto'}) |
|
403 .tooltip('show') |
|
404 |
|
405 |
|
406 ok($(".tooltip").is('.bottom'), 'top positioned tooltip is dynamically positioned bottom') |
|
407 |
|
408 topTooltip.tooltip('hide') |
|
409 |
|
410 var rightTooltip = $('<div style="display: inline-block; position: absolute; right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>') |
|
411 .appendTo('#dynamic-tt-test') |
|
412 .tooltip({placement: 'right auto'}) |
|
413 .tooltip('show') |
|
414 |
|
415 ok($(".tooltip").is('.left'), 'right positioned tooltip is dynamically positioned left') |
|
416 rightTooltip.tooltip('hide') |
|
417 |
|
418 var bottomTooltip = $('<div style="display: inline-block; position: absolute; bottom: 0;" rel="tooltip" title="Bottom tooltip">Bottom Dynamic Tooltip</div>') |
|
419 .appendTo('#dynamic-tt-test') |
|
420 .tooltip({placement: 'auto bottom'}) |
|
421 .tooltip('show') |
|
422 |
|
423 ok($(".tooltip").is('.top'), 'bottom positioned tooltip is dynamically positioned top') |
|
424 bottomTooltip.tooltip('hide') |
|
425 |
|
426 var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>') |
|
427 .appendTo('#dynamic-tt-test') |
|
428 .tooltip({placement: 'auto left'}) |
|
429 .tooltip('show') |
|
430 |
|
431 ok($(".tooltip").is('.right'), 'left positioned tooltip is dynamically positioned right') |
|
432 leftTooltip.tooltip('hide') |
|
433 |
|
434 ttContainer.remove() |
|
435 }) |
|
436 |
|
437 }) |
|