]>
git.ipfire.org Git - ipfire.org.git/blob - src/scss/bootstrap-4.0.0-alpha.6/js/tests/unit/tooltip.js
4 QUnit
. module ( 'tooltip plugin' )
6 QUnit
. test ( 'should be defined on jquery object' , function ( assert
) {
8 assert
. ok ($( document
. body
). tooltip
, 'tooltip method is defined' )
11 QUnit
. module ( 'tooltip' , {
12 beforeEach : function () {
13 // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
14 $. fn
. bootstrapTooltip
= $. fn
. tooltip
. noConflict ()
16 afterEach : function () {
17 $. fn
. tooltip
= $. fn
. bootstrapTooltip
18 delete $. fn
. bootstrapTooltip
19 $( '.tooltip' ). remove ()
23 QUnit
. test ( 'should provide no conflict' , function ( assert
) {
25 assert
. strictEqual ($. fn
. tooltip
, undefined , 'tooltip was set back to undefined (org value)' )
28 QUnit
. test ( 'should throw explicit error on undefined method' , function ( assert
) {
31 $ el
. bootstrapTooltip ()
33 $ el
. bootstrapTooltip ( 'noMethod' )
36 assert
. strictEqual ( err
. message
, 'No method named "noMethod"' )
40 QUnit
. test ( 'should return jquery collection containing the element' , function ( assert
) {
43 var $ tooltip
= $ el
. bootstrapTooltip ()
44 assert
. ok ($ tooltip
instanceof $, 'returns jquery collection' )
45 assert
. strictEqual ($ tooltip
[ 0 ], $ el
[ 0 ], 'collection contains element' )
48 QUnit
. test ( 'should expose default settings' , function ( assert
) {
50 assert
. ok ($. fn
. bootstrapTooltip
. Constructor
. Default
, 'defaults is defined' )
53 QUnit
. test ( 'should empty title attribute' , function ( assert
) {
55 var $ trigger
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' ). bootstrapTooltip ()
56 assert
. strictEqual ($ trigger
. attr ( 'title' ), '' , 'title attribute was emptied' )
59 QUnit
. test ( 'should add data attribute for referencing original title' , function ( assert
) {
61 var $ trigger
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' ). bootstrapTooltip ()
62 assert
. strictEqual ($ trigger
. attr ( 'data-original-title' ), 'Another tooltip' , 'original title preserved in data attribute' )
65 QUnit
. test ( 'should add aria-describedby to the trigger on show' , function ( assert
) {
67 var $ trigger
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
69 . appendTo ( '#qunit-fixture' )
70 . bootstrapTooltip ( 'show' )
72 var id
= $( '.tooltip' ). attr ( 'id' )
74 assert
. strictEqual ($( '#' + id
). length
, 1 , 'has a unique id' )
75 assert
. strictEqual ($( '.tooltip' ). attr ( 'aria-describedby' ), $ trigger
. attr ( 'id' ), 'tooltip id and aria-describedby on trigger match' )
76 assert
. ok ($ trigger
[ 0 ]. hasAttribute ( 'aria-describedby' ), 'trigger has aria-describedby' )
79 QUnit
. test ( 'should remove aria-describedby from trigger on hide' , function ( assert
) {
81 var $ trigger
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
83 . appendTo ( '#qunit-fixture' )
85 $ trigger
. bootstrapTooltip ( 'show' )
86 assert
. ok ($ trigger
[ 0 ]. hasAttribute ( 'aria-describedby' ), 'trigger has aria-describedby' )
88 $ trigger
. bootstrapTooltip ( 'hide' )
89 assert
. ok (!$ trigger
[ 0 ]. hasAttribute ( 'aria-describedby' ), 'trigger does not have aria-describedby' )
92 QUnit
. test ( 'should assign a unique id tooltip element' , function ( assert
) {
94 $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
95 . appendTo ( '#qunit-fixture' )
96 . bootstrapTooltip ( 'show' )
98 var id
= $( '.tooltip' ). attr ( 'id' )
100 assert
. strictEqual ($( '#' + id
). length
, 1 , 'tooltip has unique id' )
101 assert
. strictEqual ( id
. indexOf ( 'tooltip' ), 0 , 'tooltip id has prefix' )
104 QUnit
. test ( 'should place tooltips relative to placement option' , function ( assert
) {
106 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
107 . appendTo ( '#qunit-fixture' )
108 . bootstrapTooltip ({ placement
: 'bottom' })
110 $ tooltip
. bootstrapTooltip ( 'show' )
114 . is ( '.fade.bs-tether-element-attached-top.bs-tether-element-attached-center.show' ), 'has correct classes applied' )
116 $ tooltip
. bootstrapTooltip ( 'hide' )
118 assert
. strictEqual ($ tooltip
. data ( 'bs.tooltip' ). tip
. parentNode
, null , 'tooltip removed' )
121 QUnit
. test ( 'should allow html entities' , function ( assert
) {
123 var $ tooltip
= $( '<a href="#" rel="tooltip" title="<b>@fat</b>"/>' )
124 . appendTo ( '#qunit-fixture' )
125 . bootstrapTooltip ({ html
: true })
127 $ tooltip
. bootstrapTooltip ( 'show' )
128 assert
. notEqual ($( '.tooltip b' ). length
, 0 , 'b tag was inserted' )
130 $ tooltip
. bootstrapTooltip ( 'hide' )
131 assert
. strictEqual ($ tooltip
. data ( 'bs.tooltip' ). tip
. parentNode
, null , 'tooltip removed' )
134 QUnit
. test ( 'should allow DOMElement title (html: false)' , function ( assert
) {
136 var title
= document
. createTextNode ( '<3 writing tests' )
137 var $ tooltip
= $( '<a href="#" rel="tooltip"/>' )
138 . appendTo ( '#qunit-fixture' )
139 . bootstrapTooltip ({ title
: title
})
141 $ tooltip
. bootstrapTooltip ( 'show' )
143 assert
. notEqual ($( '.tooltip' ). length
, 0 , 'tooltip inserted' )
144 assert
. strictEqual ($( '.tooltip' ). text (), '<3 writing tests' , 'title inserted' )
145 assert
. ok (!$. contains ($( '.tooltip' ). get ( 0 ), title
), 'title node copied, not moved' )
148 QUnit
. test ( 'should allow DOMElement title (html: true)' , function ( assert
) {
150 var title
= document
. createTextNode ( '<3 writing tests' )
151 var $ tooltip
= $( '<a href="#" rel="tooltip"/>' )
152 . appendTo ( '#qunit-fixture' )
153 . bootstrapTooltip ({ html
: true , title
: title
})
155 $ tooltip
. bootstrapTooltip ( 'show' )
157 assert
. notEqual ($( '.tooltip' ). length
, 0 , 'tooltip inserted' )
158 assert
. strictEqual ($( '.tooltip' ). text (), '<3 writing tests' , 'title inserted' )
159 assert
. ok ($. contains ($( '.tooltip' ). get ( 0 ), title
), 'title node moved, not copied' )
163 QUnit
. test ( 'should respect custom classes' , function ( assert
) {
165 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
166 . appendTo ( '#qunit-fixture' )
167 . bootstrapTooltip ({ template
: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>' })
169 $ tooltip
. bootstrapTooltip ( 'show' )
170 assert
. ok ($( '.tooltip' ). hasClass ( 'some-class' ), 'custom class is present' )
172 $ tooltip
. bootstrapTooltip ( 'hide' )
173 assert
. strictEqual ($ tooltip
. data ( 'bs.tooltip' ). tip
. parentNode
, null , 'tooltip removed' )
176 QUnit
. test ( 'should fire show event' , function ( assert
) {
178 var done
= assert
. async ()
180 $( '<div title="tooltip title"/>' )
181 . on ( 'show.bs.tooltip' , function () {
182 assert
. ok ( true , 'show event fired' )
185 . bootstrapTooltip ( 'show' )
188 QUnit
. test ( 'should throw an error when show is called on hidden elements' , function ( assert
) {
190 var done
= assert
. async ()
193 $( '<div title="tooltip title" style="display: none"/>' ). bootstrapTooltip ( 'show' )
196 assert
. strictEqual ( err
. message
, 'Please use show on visible elements' )
201 QUnit
. test ( 'should fire inserted event' , function ( assert
) {
203 var done
= assert
. async ()
205 $( '<div title="tooltip title"/>' )
206 . appendTo ( '#qunit-fixture' )
207 . on ( 'inserted.bs.tooltip' , function () {
208 assert
. notEqual ($( '.tooltip' ). length
, 0 , 'tooltip was inserted' )
209 assert
. ok ( true , 'inserted event fired' )
212 . bootstrapTooltip ( 'show' )
215 QUnit
. test ( 'should fire shown event' , function ( assert
) {
217 var done
= assert
. async ()
219 $( '<div title="tooltip title"></div>' )
220 . appendTo ( '#qunit-fixture' )
221 . on ( 'shown.bs.tooltip' , function () {
222 assert
. ok ( true , 'shown was called' )
225 . bootstrapTooltip ( 'show' )
228 QUnit
. test ( 'should not fire shown event when show was prevented' , function ( assert
) {
230 var done
= assert
. async ()
232 $( '<div title="tooltip title"/>' )
233 . on ( 'show.bs.tooltip' , function ( e
) {
235 assert
. ok ( true , 'show event fired' )
238 . on ( 'shown.bs.tooltip' , function () {
239 assert
. ok ( false , 'shown event fired' )
241 . bootstrapTooltip ( 'show' )
244 QUnit
. test ( 'should fire hide event' , function ( assert
) {
246 var done
= assert
. async ()
248 $( '<div title="tooltip title"/>' )
249 . appendTo ( '#qunit-fixture' )
250 . on ( 'shown.bs.tooltip' , function () {
251 $( this ). bootstrapTooltip ( 'hide' )
253 . on ( 'hide.bs.tooltip' , function () {
254 assert
. ok ( true , 'hide event fired' )
257 . bootstrapTooltip ( 'show' )
260 QUnit
. test ( 'should fire hidden event' , function ( assert
) {
262 var done
= assert
. async ()
264 $( '<div title="tooltip title"/>' )
265 . appendTo ( '#qunit-fixture' )
266 . on ( 'shown.bs.tooltip' , function () {
267 $( this ). bootstrapTooltip ( 'hide' )
269 . on ( 'hidden.bs.tooltip' , function () {
270 assert
. ok ( true , 'hidden event fired' )
273 . bootstrapTooltip ( 'show' )
276 QUnit
. test ( 'should not fire hidden event when hide was prevented' , function ( assert
) {
278 var done
= assert
. async ()
280 $( '<div title="tooltip title"/>' )
281 . appendTo ( '#qunit-fixture' )
282 . on ( 'shown.bs.tooltip' , function () {
283 $( this ). bootstrapTooltip ( 'hide' )
285 . on ( 'hide.bs.tooltip' , function ( e
) {
287 assert
. ok ( true , 'hide event fired' )
290 . on ( 'hidden.bs.tooltip' , function () {
291 assert
. ok ( false , 'hidden event fired' )
293 . bootstrapTooltip ( 'show' )
296 QUnit
. test ( 'should destroy tooltip' , function ( assert
) {
298 var $ tooltip
= $( '<div/>' )
300 . on ( 'click.foo' , function () {})
302 assert
. ok ($ tooltip
. data ( 'bs.tooltip' ), 'tooltip has data' )
303 assert
. ok ($. _data ($ tooltip
[ 0 ], 'events' ). mouseover
&& $. _data ($ tooltip
[ 0 ], 'events' ). mouseout
, 'tooltip has hover events' )
304 assert
. strictEqual ($. _data ($ tooltip
[ 0 ], 'events' ). click
[ 0 ]. namespace , 'foo' , 'tooltip has extra click.foo event' )
306 $ tooltip
. bootstrapTooltip ( 'show' )
307 $ tooltip
. bootstrapTooltip ( 'dispose' )
309 assert
. ok (!$ tooltip
. hasClass ( 'show' ), 'tooltip is hidden' )
310 assert
. ok (!$. _data ($ tooltip
[ 0 ], 'bs.tooltip' ), 'tooltip does not have data' )
311 assert
. strictEqual ($. _data ($ tooltip
[ 0 ], 'events' ). click
[ 0 ]. namespace , 'foo' , 'tooltip still has click.foo' )
312 assert
. ok (!$. _data ($ tooltip
[ 0 ], 'events' ). mouseover
&& !$. _data ($ tooltip
[ 0 ], 'events' ). mouseout
, 'tooltip does not have hover events' )
315 // QUnit.test('should show tooltip with delegate selector on click', function (assert) {
317 // var $div = $('<div><a href="#" rel="tooltip" title="Another tooltip"/></div>')
318 // .appendTo('#qunit-fixture')
319 // .bootstrapTooltip({
320 // selector: 'a[rel="tooltip"]',
324 // $div.find('a').trigger('click')
325 // assert.ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
327 // $div.find('a').trigger('click')
328 // assert.strictEqual($div.data('bs.tooltip').tip.parentNode, null, 'tooltip removed')
331 QUnit
. test ( 'should show tooltip when toggle is called' , function ( assert
) {
333 $( '<a href="#" rel="tooltip" title="tooltip on toggle"/>' )
334 . appendTo ( '#qunit-fixture' )
335 . bootstrapTooltip ({ trigger
: 'manual' })
336 . bootstrapTooltip ( 'toggle' )
338 assert
. ok ($( '.tooltip' ). is ( '.fade.show' ), 'tooltip is faded active' )
341 QUnit
. test ( 'should hide previously shown tooltip when toggle is called on tooltip' , function ( assert
) {
343 $( '<a href="#" rel="tooltip" title="tooltip on toggle">@ResentedHook</a>' )
344 . appendTo ( '#qunit-fixture' )
345 . bootstrapTooltip ({ trigger
: 'manual' })
346 . bootstrapTooltip ( 'show' )
348 $( '.tooltip' ). bootstrapTooltip ( 'toggle' )
349 assert
. ok ($( '.tooltip' ). not ( '.fade.show' ), 'tooltip was faded out' )
352 QUnit
. test ( 'should place tooltips inside body when container is body' , function ( assert
) {
354 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
355 . appendTo ( '#qunit-fixture' )
356 . bootstrapTooltip ({ container
: 'body' })
357 . bootstrapTooltip ( 'show' )
359 assert
. notEqual ($( 'body > .tooltip' ). length
, 0 , 'tooltip is direct descendant of body' )
360 assert
. strictEqual ($( '#qunit-fixture > .tooltip' ). length
, 0 , 'tooltip is not in parent' )
362 $ tooltip
. bootstrapTooltip ( 'hide' )
363 assert
. strictEqual ($( 'body > .tooltip' ). length
, 0 , 'tooltip was removed from dom' )
366 QUnit
. test ( 'should add position class before positioning so that position-specific styles are taken into account' , function ( assert
) {
368 var styles
= '<style>'
369 + '.tooltip.right { white-space: nowrap; }'
370 + '.tooltip.right .tooltip-inner { max-width: none; }'
372 var $ styles
= $( styles
). appendTo ( 'head' )
374 var $ container
= $( '<div/>' ). appendTo ( '#qunit-fixture' )
375 var $ target
= $( '<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>' )
376 . appendTo ($ container
)
380 . bootstrapTooltip ( 'show' )
382 var $ tooltip
= $($ target
. data ( 'bs.tooltip' ). tip
)
384 // this is some dumb hack stuff because sub pixels in firefox
385 var top
= Math
. round ($ target
. offset (). top
+ $ target
[ 0 ]. offsetHeight
/ 2 - $ tooltip
[ 0 ]. offsetHeight
/ 2 )
386 var top2
= Math
. round ($ tooltip
. offset (). top
)
387 var topDiff
= top
- top2
388 assert
. ok ( topDiff
<= 1 && topDiff
>= - 1 )
389 $ target
. bootstrapTooltip ( 'hide' )
395 QUnit
. test ( 'should use title attribute for tooltip text' , function ( assert
) {
397 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Simple tooltip"/>' )
398 . appendTo ( '#qunit-fixture' )
401 $ tooltip
. bootstrapTooltip ( 'show' )
402 assert
. strictEqual ($( '.tooltip' ). children ( '.tooltip-inner' ). text (), 'Simple tooltip' , 'title from title attribute is set' )
404 $ tooltip
. bootstrapTooltip ( 'hide' )
405 assert
. strictEqual ($( '.tooltip' ). length
, 0 , 'tooltip removed from dom' )
408 QUnit
. test ( 'should prefer title attribute over title option' , function ( assert
) {
410 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Simple tooltip"/>' )
411 . appendTo ( '#qunit-fixture' )
413 title
: 'This is a tooltip with some content'
416 $ tooltip
. bootstrapTooltip ( 'show' )
417 assert
. strictEqual ($( '.tooltip' ). children ( '.tooltip-inner' ). text (), 'Simple tooltip' , 'title is set from title attribute while preferred over title option' )
419 $ tooltip
. bootstrapTooltip ( 'hide' )
420 assert
. strictEqual ($( '.tooltip' ). length
, 0 , 'tooltip removed from dom' )
423 QUnit
. test ( 'should use title option' , function ( assert
) {
425 var $ tooltip
= $( '<a href="#" rel="tooltip"/>' )
426 . appendTo ( '#qunit-fixture' )
428 title
: 'This is a tooltip with some content'
431 $ tooltip
. bootstrapTooltip ( 'show' )
432 assert
. strictEqual ($( '.tooltip' ). children ( '.tooltip-inner' ). text (), 'This is a tooltip with some content' , 'title from title option is set' )
434 $ tooltip
. bootstrapTooltip ( 'hide' )
435 assert
. strictEqual ($( '.tooltip' ). length
, 0 , 'tooltip removed from dom' )
438 QUnit
. test ( 'should not error when trying to show an top-placed tooltip that has been removed from the dom' , function ( assert
) {
441 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
442 . appendTo ( '#qunit-fixture' )
443 . one ( 'show.bs.tooltip' , function () {
446 . bootstrapTooltip ({ placement
: 'top' })
449 $ tooltip
. bootstrapTooltip ( 'show' )
455 assert
. ok ( passed
, '.tooltip( \' show \' ) should not throw an error if element no longer is in dom' )
458 QUnit
. test ( 'should place tooltip on top of element' , function ( assert
) {
460 var done
= assert
. async ()
462 var containerHTML
= '<div>'
463 + '<p style="margin-top: 200px">'
464 + '<a href="#" title="very very very very very very very long tooltip">Hover me</a>'
468 var $ container
= $( containerHTML
)
470 position
: 'absolute' ,
477 . appendTo ( '#qunit-fixture' )
479 var $ trigger
= $ container
481 . css ( 'margin-top' , 200 )
486 . bootstrapTooltip ( 'show' )
488 var $ tooltip
= $($ trigger
. data ( 'bs.tooltip' ). tip
)
490 setTimeout ( function () {
491 assert
. ok ( Math
. round ($ tooltip
. offset (). top
+ $ tooltip
. outerHeight ()) <= Math
. round ($ trigger
. offset (). top
))
496 QUnit
. test ( 'should show tooltip if leave event hasn \' t occurred before delay expires' , function ( assert
) {
498 var done
= assert
. async ()
500 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
501 . appendTo ( '#qunit-fixture' )
502 . bootstrapTooltip ({ delay
: 150 })
504 setTimeout ( function () {
505 assert
. ok (!$( '.tooltip' ). is ( '.fade.show' ), '100ms: tooltip is not faded active' )
508 setTimeout ( function () {
509 assert
. ok ($( '.tooltip' ). is ( '.fade.show' ), '200ms: tooltip is faded active' )
513 $ tooltip
. trigger ( 'mouseenter' )
516 QUnit
. test ( 'should not show tooltip if leave event occurs before delay expires' , function ( assert
) {
518 var done
= assert
. async ()
520 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
521 . appendTo ( '#qunit-fixture' )
522 . bootstrapTooltip ({ delay
: 150 })
524 setTimeout ( function () {
525 assert
. ok (!$( '.tooltip' ). is ( '.fade.show' ), '100ms: tooltip not faded active' )
526 $ tooltip
. trigger ( 'mouseout' )
529 setTimeout ( function () {
530 assert
. ok (!$( '.tooltip' ). is ( '.fade.show' ), '200ms: tooltip not faded active' )
534 $ tooltip
. trigger ( 'mouseenter' )
537 QUnit
. test ( 'should not hide tooltip if leave event occurs and enter event occurs within the hide delay' , function ( assert
) {
539 var done
= assert
. async ()
541 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
542 . appendTo ( '#qunit-fixture' )
543 . bootstrapTooltip ({ delay
: { show
: 0 , hide
: 150 } })
545 setTimeout ( function () {
546 assert
. ok ($( '.tooltip' ). is ( '.fade.show' ), '1ms: tooltip faded active' )
547 $ tooltip
. trigger ( 'mouseout' )
549 setTimeout ( function () {
550 assert
. ok ($( '.tooltip' ). is ( '.fade.show' ), '100ms: tooltip still faded active' )
551 $ tooltip
. trigger ( 'mouseenter' )
554 setTimeout ( function () {
555 assert
. ok ($( '.tooltip' ). is ( '.fade.show' ), '200ms: tooltip still faded active' )
560 $ tooltip
. trigger ( 'mouseenter' )
563 QUnit
. test ( 'should not show tooltip if leave event occurs before delay expires' , function ( assert
) {
565 var done
= assert
. async ()
567 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
568 . appendTo ( '#qunit-fixture' )
569 . bootstrapTooltip ({ delay
: 150 })
571 setTimeout ( function () {
572 assert
. ok (!$( '.tooltip' ). is ( '.fade.show' ), '100ms: tooltip not faded active' )
573 $ tooltip
. trigger ( 'mouseout' )
576 setTimeout ( function () {
577 assert
. ok (!$( '.tooltip' ). is ( '.fade.show' ), '200ms: tooltip not faded active' )
581 $ tooltip
. trigger ( 'mouseenter' )
584 QUnit
. test ( 'should not show tooltip if leave event occurs before delay expires, even if hide delay is 0' , function ( assert
) {
586 var done
= assert
. async ()
588 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
589 . appendTo ( '#qunit-fixture' )
590 . bootstrapTooltip ({ delay
: { show
: 150 , hide
: 0 } })
592 setTimeout ( function () {
593 assert
. ok (!$( '.tooltip' ). is ( '.fade.show' ), '100ms: tooltip not faded active' )
594 $ tooltip
. trigger ( 'mouseout' )
597 setTimeout ( function () {
598 assert
. ok (!$( '.tooltip' ). is ( '.fade.show' ), '250ms: tooltip not faded active' )
602 $ tooltip
. trigger ( 'mouseenter' )
605 QUnit
. test ( 'should wait 200ms before hiding the tooltip' , function ( assert
) {
607 var done
= assert
. async ()
609 var $ tooltip
= $( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
610 . appendTo ( '#qunit-fixture' )
611 . bootstrapTooltip ({ delay
: { show
: 0 , hide
: 150 } })
613 setTimeout ( function () {
614 assert
. ok ($($ tooltip
. data ( 'bs.tooltip' ). tip
). is ( '.fade.show' ), '1ms: tooltip faded active' )
616 $ tooltip
. trigger ( 'mouseout' )
618 setTimeout ( function () {
619 assert
. ok ($($ tooltip
. data ( 'bs.tooltip' ). tip
). is ( '.fade.show' ), '100ms: tooltip still faded active' )
622 setTimeout ( function () {
623 assert
. ok (!$($ tooltip
. data ( 'bs.tooltip' ). tip
). is ( '.show' ), '200ms: tooltip removed' )
629 $ tooltip
. trigger ( 'mouseenter' )
632 QUnit
. test ( 'should correctly position tooltips on SVG elements' , function ( assert
) {
633 if (! window
. SVGElement
) {
634 // Skip IE8 since it doesn't support SVG
640 var done
= assert
. async ()
642 var styles
= '<style>'
643 + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
644 + '.tooltip { position: absolute; }'
645 + '.tooltip .tooltip-inner { width: 24px; height: 24px; font-family: Helvetica; }'
647 var $ styles
= $( styles
). appendTo ( 'head' )
649 $( '#qunit-fixture' ). append (
650 '<div style="position: fixed; top: 0; left: 0;">'
651 + ' <svg width="200" height="200">'
652 + ' <circle cx="100" cy="100" r="10" title="m" id="theCircle" />'
655 var $ circle
= $( '#theCircle' )
658 . on ( 'shown.bs.tooltip' , function () {
659 var offset
= $( '.tooltip' ). offset ()
661 assert
. ok ( Math
. abs ( offset
. left
- 88 ) <= 1 , 'tooltip has correct horizontal location' )
662 $ circle
. bootstrapTooltip ( 'hide' )
663 assert
. strictEqual ($( '.tooltip' ). length
, 0 , 'tooltip removed from dom' )
666 . bootstrapTooltip ({ placement
: 'top' , trigger
: 'manual' })
668 $ circle
. bootstrapTooltip ( 'show' )
671 QUnit
. test ( 'should not reload the tooltip on subsequent mouseenter events' , function ( assert
) {
673 var titleHtml = function () {
674 var uid
= Util
. getUID ( 'tooltip' )
675 return '<p id="tt-content">' + uid
+ '</p><p>' + uid
+ '</p><p>' + uid
+ '</p>'
678 var $ tooltip
= $( '<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>' )
679 . appendTo ( '#qunit-fixture' )
681 $ tooltip
. bootstrapTooltip ({
685 delay
: { show
: 0 , hide
: 500 },
690 $( '#tt-outer' ). trigger ( 'mouseenter' )
692 var currentUid
= $( '#tt-content' ). text ()
694 $( '#tt-content' ). trigger ( 'mouseenter' )
695 assert
. strictEqual ( currentUid
, $( '#tt-content' ). text ())
698 QUnit
. test ( 'should not reload the tooltip if the mouse leaves and re-enters before hiding' , function ( assert
) {
701 var titleHtml = function () {
702 var uid
= Util
. getUID ( 'tooltip' )
703 return '<p id="tt-content">' + uid
+ '</p><p>' + uid
+ '</p><p>' + uid
+ '</p>'
706 var $ tooltip
= $( '<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>' )
707 . appendTo ( '#qunit-fixture' )
709 $ tooltip
. bootstrapTooltip ({
713 delay
: { show
: 0 , hide
: 500 },
717 var obj
= $ tooltip
. data ( 'bs.tooltip' )
719 $( '#tt-outer' ). trigger ( 'mouseenter' )
721 var currentUid
= $( '#tt-content' ). text ()
723 $( '#tt-outer' ). trigger ( 'mouseleave' )
724 assert
. strictEqual ( currentUid
, $( '#tt-content' ). text ())
726 assert
. ok ( obj
. _hoverState
=== 'out' , 'the tooltip hoverState should be set to "out"' )
728 $( '#tt-outer' ). trigger ( 'mouseenter' )
729 assert
. ok ( obj
. _hoverState
=== 'show' , 'the tooltip hoverState should be set to "show"' )
731 assert
. strictEqual ( currentUid
, $( '#tt-content' ). text ())
734 QUnit
. test ( 'should correctly position tooltips on transformed elements' , function ( assert
) {
735 var styleProps
= document
. documentElement
. style
736 if (!( 'transform' in styleProps
) && !( 'webkitTransform' in styleProps
) && !( 'msTransform' in styleProps
)) {
742 var done
= assert
. async ()
744 var styles
= '<style>'
745 + '#qunit-fixture { top: 0; left: 0; }'
746 + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
747 + '.tooltip { position: absolute; }'
748 + '.tooltip .tooltip-inner { width: 24px; height: 24px; font-family: Helvetica; }'
749 + '#target { position: absolute; top: 100px; left: 50px; width: 100px; height: 200px; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }'
751 var $ styles
= $( styles
). appendTo ( 'head' )
753 var $ element
= $( '<div id="target" title="1"/>' ). appendTo ( '#qunit-fixture' )
756 . on ( 'shown.bs.tooltip' , function () {
757 var offset
= $( '.tooltip' ). offset ()
759 assert
. ok ( Math
. abs ( offset
. left
- 88 ) <= 1 , 'tooltip has correct horizontal location' )
760 assert
. ok ( Math
. abs ( offset
. top
- 126 ) <= 1 , 'tooltip has correct vertical location' )
761 $ element
. bootstrapTooltip ( 'hide' )
768 $ element
. bootstrapTooltip ( 'show' )
771 QUnit
. test ( 'should do nothing when an attempt is made to hide an uninitialized tooltip' , function ( assert
) {
774 var $ tooltip
= $( '<span data-toggle="tooltip" title="some tip">some text</span>' )
775 . appendTo ( '#qunit-fixture' )
776 . on ( 'hidden.bs.tooltip shown.bs.tooltip' , function () {
777 assert
. ok ( false , 'should not fire any tooltip events' )
779 . bootstrapTooltip ( 'hide' )
780 assert
. strictEqual ($ tooltip
. data ( 'bs.tooltip' ), undefined , 'should not initialize the tooltip' )
783 QUnit
. test ( 'should not remove tooltip if multiple triggers are set and one is still active' , function ( assert
) {
785 var $ el
= $( '<button>Trigger</button>' )
786 . appendTo ( '#qunit-fixture' )
787 . bootstrapTooltip ({ trigger
: 'click hover focus' , animation
: false })
788 var tooltip
= $ el
. data ( 'bs.tooltip' )
789 var $ tooltip
= $( tooltip
. getTipElement ())
791 function showingTooltip () { return $ tooltip
. hasClass ( 'show' ) || tooltip
. _hoverState
=== 'show' }
794 [ 'mouseenter' , 'mouseleave' ],
796 [ 'focusin' , 'focusout' ],
800 [ 'mouseenter' , 'focusin' , 'focusout' , 'mouseleave' ],
801 [ 'mouseenter' , 'focusin' , 'mouseleave' , 'focusout' ],
803 [ 'focusin' , 'mouseenter' , 'mouseleave' , 'focusout' ],
804 [ 'focusin' , 'mouseenter' , 'focusout' , 'mouseleave' ],
806 [ 'click' , 'focusin' , 'mouseenter' , 'focusout' , 'mouseleave' , 'click' ],
807 [ 'mouseenter' , 'click' , 'focusin' , 'focusout' , 'mouseleave' , 'click' ],
808 [ 'mouseenter' , 'focusin' , 'click' , 'click' , 'mouseleave' , 'focusout' ]
811 assert
. ok (! showingTooltip ())
813 $. each ( tests
, function ( idx
, triggers
) {
814 for ( var i
= 0 , len
= triggers
. length
; i
< len
; i
++) {
815 $ el
. trigger ( triggers
[ i
])
816 assert
. equal ( i
< len
- 1 , showingTooltip ())
821 QUnit
. test ( 'should show on first trigger after hide' , function ( assert
) {
823 var $ el
= $( '<a href="#" rel="tooltip" title="Test tooltip"/>' )
824 . appendTo ( '#qunit-fixture' )
825 . bootstrapTooltip ({ trigger
: 'click hover focus' , animation
: false })
827 var tooltip
= $ el
. data ( 'bs.tooltip' )
828 var $ tooltip
= $( tooltip
. getTipElement ())
830 function showingTooltip () { return $ tooltip
. hasClass ( 'show' ) || tooltip
. _hoverState
=== 'show' }
833 assert
. ok ( showingTooltip (), 'tooltip is faded in' )
835 $ el
. bootstrapTooltip ( 'hide' )
836 assert
. ok (! showingTooltip (), 'tooltip was faded out' )
839 assert
. ok ( showingTooltip (), 'tooltip is faded in again' )
842 QUnit
. test ( 'should hide tooltip when their containing modal is closed' , function ( assert
) {
844 var done
= assert
. async ()
845 var templateHTML
= '<div id="modal-test" class="modal">' +
846 '<div class="modal-dialog" role="document">' +
847 '<div class="modal-content">' +
848 '<div class="modal-body">' +
849 '<a id="tooltipTest" href="#" data-toggle="tooltip" title="Some tooltip text!">Tooltip</a>' +
855 $( templateHTML
). appendTo ( '#qunit-fixture' )
857 . bootstrapTooltip ({ trigger
: 'manuel' })
858 . on ( 'shown.bs.tooltip' , function () {
859 $( '#modal-test' ). modal ( 'hide' )
861 . on ( 'hide.bs.tooltip' , function () {
862 assert
. ok ( true , 'tooltip hide' )
867 . on ( 'shown.bs.modal' , function () {
868 $( '#tooltipTest' ). bootstrapTooltip ( 'show' )