2011-09-10 21:49:21 +02:00
$ ( function ( ) {
2014-03-17 08:12:55 +01:00
'use strict' ;
2011-09-10 21:49:21 +02:00
2015-02-24 07:04:48 +01:00
QUnit . module ( 'tooltip plugin' )
2014-02-13 08:55:12 +01:00
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should be defined on jquery object' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( document . body ) . tooltip , 'tooltip method is defined' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . module ( 'tooltip' , {
2015-02-26 08:20:42 +01:00
beforeEach : function ( ) {
2014-04-22 07:03:33 +02:00
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
$ . fn . bootstrapTooltip = $ . fn . tooltip . noConflict ( )
} ,
2015-02-26 08:20:42 +01:00
afterEach : function ( ) {
2014-04-22 07:03:33 +02:00
$ . fn . tooltip = $ . fn . bootstrapTooltip
delete $ . fn . bootstrapTooltip
}
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should provide no conflict' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-02-24 06:55:07 +01:00
assert . strictEqual ( $ . fn . tooltip , undefined , 'tooltip was set back to undefined (org value)' )
2014-04-22 07:03:33 +02:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should return jquery collection containing the element' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-06-18 21:35:03 +02:00
var $el = $ ( '<div/>' )
var $tooltip = $el . bootstrapTooltip ( )
2015-02-24 06:55:07 +01:00
assert . ok ( $tooltip instanceof $ , 'returns jquery collection' )
assert . strictEqual ( $tooltip [ 0 ] , $el [ 0 ] , 'collection contains element' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should expose default settings' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-02-24 06:55:07 +01:00
assert . ok ( $ . fn . bootstrapTooltip . Constructor . DEFAULTS , 'defaults is defined' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should empty title attribute' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2014-06-18 21:35:03 +02:00
var $trigger = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' ) . bootstrapTooltip ( )
2015-02-24 06:55:07 +01:00
assert . strictEqual ( $trigger . attr ( 'title' ) , '' , 'title attribute was emptied' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should add data attribute for referencing original title' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2014-06-18 21:35:03 +02:00
var $trigger = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' ) . bootstrapTooltip ( )
2015-02-24 06:55:07 +01:00
assert . strictEqual ( $trigger . attr ( 'data-original-title' ) , 'Another tooltip' , 'original title preserved in data attribute' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should add aria-describedby to the trigger on show' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 3 )
2014-06-18 21:35:03 +02:00
var $trigger = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
. bootstrapTooltip ( )
2014-05-09 05:19:12 +02:00
. appendTo ( '#qunit-fixture' )
. bootstrapTooltip ( 'show' )
2014-06-18 21:35:03 +02:00
2014-05-09 05:19:12 +02:00
var id = $ ( '.tooltip' ) . attr ( 'id' )
2015-02-24 06:55:07 +01:00
assert . strictEqual ( $ ( '#' + id ) . length , 1 , 'has a unique id' )
assert . strictEqual ( $ ( '.tooltip' ) . attr ( 'aria-describedby' ) , $trigger . attr ( 'id' ) , 'tooltip id and aria-describedby on trigger match' )
assert . ok ( $trigger [ 0 ] . hasAttribute ( 'aria-describedby' ) , 'trigger has aria-describedby' )
2014-05-09 05:19:12 +02:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should remove aria-describedby from trigger on hide' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-06-18 21:35:03 +02:00
var $trigger = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
. bootstrapTooltip ( )
2014-05-09 05:19:12 +02:00
. appendTo ( '#qunit-fixture' )
2014-06-18 21:35:03 +02:00
$trigger . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $trigger [ 0 ] . hasAttribute ( 'aria-describedby' ) , 'trigger has aria-describedby' )
2014-06-18 21:35:03 +02:00
$trigger . bootstrapTooltip ( 'hide' )
2015-02-24 06:55:07 +01:00
assert . ok ( ! $trigger [ 0 ] . hasAttribute ( 'aria-describedby' ) , 'trigger does not have aria-describedby' )
2014-05-09 05:19:12 +02:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should assign a unique id tooltip element' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-06-18 21:35:03 +02:00
$ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
2014-05-09 05:19:12 +02:00
. appendTo ( '#qunit-fixture' )
2014-03-17 08:12:55 +01:00
. bootstrapTooltip ( 'show' )
2014-06-18 21:35:03 +02:00
2014-03-17 08:12:55 +01:00
var id = $ ( '.tooltip' ) . attr ( 'id' )
2014-05-09 05:19:12 +02:00
2015-02-24 06:55:07 +01:00
assert . strictEqual ( $ ( '#' + id ) . length , 1 , 'tooltip has unique id' )
assert . strictEqual ( id . indexOf ( 'tooltip' ) , 0 , 'tooltip id has prefix' )
2014-05-09 05:19:12 +02:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should place tooltips relative to placement option' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-06-18 21:35:03 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
2014-02-13 08:55:12 +01:00
. appendTo ( '#qunit-fixture' )
2014-03-17 08:12:55 +01:00
. bootstrapTooltip ( { placement : 'bottom' } )
2014-02-13 08:55:12 +01:00
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.fade.bottom.in' ) , 'has correct classes applied' )
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should allow html entities' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-07-08 23:39:35 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="<b>@fat</b>"/>' )
2014-02-13 08:55:12 +01:00
. appendTo ( '#qunit-fixture' )
2014-03-17 08:12:55 +01:00
. bootstrapTooltip ( { html : true } )
2014-02-13 08:55:12 +01:00
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . notEqual ( $ ( '.tooltip b' ) . length , 0 , 'b tag was inserted' )
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should respect custom classes' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-06-18 21:35:03 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
2014-02-13 08:55:12 +01:00
. appendTo ( '#qunit-fixture' )
2014-03-17 08:12:55 +01:00
. bootstrapTooltip ( { template : '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>' } )
2014-02-13 08:55:12 +01:00
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . hasClass ( 'some-class' ) , 'custom class is present' )
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should fire show event' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-06-18 21:35:03 +02:00
$ ( '<div title="tooltip title"/>' )
2014-02-13 08:55:12 +01:00
. on ( 'show.bs.tooltip' , function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( true , 'show event fired' )
2015-01-21 04:40:50 +01:00
done ( )
2014-02-13 08:55:12 +01:00
} )
2014-04-22 07:03:33 +02:00
. bootstrapTooltip ( 'show' )
2014-02-13 08:55:12 +01:00
} )
2015-03-24 20:47:35 +01:00
QUnit . test ( 'should fire inserted event' , function ( assert ) {
assert . expect ( 2 )
var done = assert . async ( )
$ ( '<div title="tooltip title"/>' )
. appendTo ( '#qunit-fixture' )
. on ( 'inserted.bs.tooltip' , function ( ) {
assert . notEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip was inserted' )
assert . ok ( true , 'inserted event fired' )
done ( )
} )
. bootstrapTooltip ( 'show' )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should fire shown event' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-06-18 21:35:03 +02:00
$ ( '<div title="tooltip title"></div>' )
. appendTo ( '#qunit-fixture' )
2014-02-13 08:55:12 +01:00
. on ( 'shown.bs.tooltip' , function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( true , 'shown was called' )
2015-01-21 04:40:50 +01:00
done ( )
2014-02-13 08:55:12 +01:00
} )
2014-04-22 07:03:33 +02:00
. bootstrapTooltip ( 'show' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should not fire shown event when show was prevented' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-06-18 21:35:03 +02:00
$ ( '<div title="tooltip title"/>' )
2014-02-13 08:55:12 +01:00
. on ( 'show.bs.tooltip' , function ( e ) {
e . preventDefault ( )
2015-02-24 06:55:07 +01:00
assert . ok ( true , 'show event fired' )
2015-01-21 04:40:50 +01:00
done ( )
2014-02-13 08:55:12 +01:00
} )
. on ( 'shown.bs.tooltip' , function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( false , 'shown event fired' )
2014-02-13 08:55:12 +01:00
} )
2014-04-22 07:03:33 +02:00
. bootstrapTooltip ( 'show' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should fire hide event' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-06-18 21:35:03 +02:00
$ ( '<div title="tooltip title"/>' )
. appendTo ( '#qunit-fixture' )
2014-02-13 08:55:12 +01:00
. on ( 'shown.bs.tooltip' , function ( ) {
2014-04-22 07:03:33 +02:00
$ ( this ) . bootstrapTooltip ( 'hide' )
2014-02-13 08:55:12 +01:00
} )
. on ( 'hide.bs.tooltip' , function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( true , 'hide event fired' )
2015-01-21 04:40:50 +01:00
done ( )
2014-02-13 08:55:12 +01:00
} )
2014-04-22 07:03:33 +02:00
. bootstrapTooltip ( 'show' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should fire hidden event' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-06-18 21:35:03 +02:00
$ ( '<div title="tooltip title"/>' )
. appendTo ( '#qunit-fixture' )
2014-02-13 08:55:12 +01:00
. on ( 'shown.bs.tooltip' , function ( ) {
2014-04-22 07:03:33 +02:00
$ ( this ) . bootstrapTooltip ( 'hide' )
2014-02-13 08:55:12 +01:00
} )
. on ( 'hidden.bs.tooltip' , function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( true , 'hidden event fired' )
2015-01-21 04:40:50 +01:00
done ( )
2014-02-13 08:55:12 +01:00
} )
2014-04-22 07:03:33 +02:00
. bootstrapTooltip ( 'show' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should not fire hidden event when hide was prevented' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-06-18 21:35:03 +02:00
$ ( '<div title="tooltip title"/>' )
. appendTo ( '#qunit-fixture' )
2014-02-13 08:55:12 +01:00
. on ( 'shown.bs.tooltip' , function ( ) {
2014-04-22 07:03:33 +02:00
$ ( this ) . bootstrapTooltip ( 'hide' )
2014-02-13 08:55:12 +01:00
} )
. on ( 'hide.bs.tooltip' , function ( e ) {
e . preventDefault ( )
2015-02-24 06:55:07 +01:00
assert . ok ( true , 'hide event fired' )
2015-01-21 04:40:50 +01:00
done ( )
2014-02-13 08:55:12 +01:00
} )
. on ( 'hidden.bs.tooltip' , function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( false , 'hidden event fired' )
2014-02-13 08:55:12 +01:00
} )
2014-04-22 07:03:33 +02:00
. bootstrapTooltip ( 'show' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should destroy tooltip' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 7 )
2014-06-18 21:35:03 +02:00
var $tooltip = $ ( '<div/>' )
. bootstrapTooltip ( )
. on ( 'click.foo' , function ( ) { } )
2015-02-24 06:55:07 +01:00
assert . ok ( $tooltip . data ( 'bs.tooltip' ) , 'tooltip has data' )
assert . ok ( $ . _data ( $tooltip [ 0 ] , 'events' ) . mouseover && $ . _data ( $tooltip [ 0 ] , 'events' ) . mouseout , 'tooltip has hover events' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ . _data ( $tooltip [ 0 ] , 'events' ) . click [ 0 ] . namespace , 'foo' , 'tooltip has extra click.foo event' )
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'show' )
$tooltip . bootstrapTooltip ( 'destroy' )
2015-02-24 06:55:07 +01:00
assert . ok ( ! $tooltip . hasClass ( 'in' ) , 'tooltip is hidden' )
assert . ok ( ! $ . _data ( $tooltip [ 0 ] , 'bs.tooltip' ) , 'tooltip does not have data' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ . _data ( $tooltip [ 0 ] , 'events' ) . click [ 0 ] . namespace , 'foo' , 'tooltip still has click.foo' )
2015-02-24 06:55:07 +01:00
assert . ok ( ! $ . _data ( $tooltip [ 0 ] , 'events' ) . mouseover && ! $ . _data ( $tooltip [ 0 ] , 'events' ) . mouseout , 'tooltip does not have hover events' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should show tooltip with delegate selector on click' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-06-18 21:35:03 +02:00
var $div = $ ( '<div><a href="#" rel="tooltip" title="Another tooltip"/></div>' )
. appendTo ( '#qunit-fixture' )
. bootstrapTooltip ( {
selector : 'a[rel="tooltip"]' ,
trigger : 'click'
} )
2015-03-06 13:34:28 +01:00
$div . find ( 'a' ) . trigger ( 'click' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.fade.in' ) , 'tooltip is faded in' )
2014-06-18 21:35:03 +02:00
2015-03-06 13:34:28 +01:00
$div . find ( 'a' ) . trigger ( 'click' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip was removed from dom' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should show tooltip when toggle is called' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2014-06-18 21:35:03 +02:00
$ ( '<a href="#" rel="tooltip" title="tooltip on toggle"/>' )
2014-02-13 08:55:12 +01:00
. appendTo ( '#qunit-fixture' )
2014-03-17 08:12:55 +01:00
. bootstrapTooltip ( { trigger : 'manual' } )
2014-04-22 07:03:33 +02:00
. bootstrapTooltip ( 'toggle' )
2014-06-18 21:35:03 +02:00
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.fade.in' ) , 'tooltip is faded in' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should hide previously shown tooltip when toggle is called on tooltip' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2014-06-18 21:35:03 +02:00
$ ( '<a href="#" rel="tooltip" title="tooltip on toggle">@ResentedHook</a>' )
2014-05-14 19:36:32 +02:00
. appendTo ( '#qunit-fixture' )
2014-03-17 08:12:55 +01:00
. bootstrapTooltip ( { trigger : 'manual' } )
2014-06-18 21:35:03 +02:00
. bootstrapTooltip ( 'show' )
$ ( '.tooltip' ) . bootstrapTooltip ( 'toggle' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . not ( '.fade.in' ) , 'tooltip was faded out' )
2014-05-14 19:36:32 +02:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should place tooltips inside body when container is body' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 3 )
2014-06-18 21:35:03 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
2014-02-13 08:55:12 +01:00
. appendTo ( '#qunit-fixture' )
2014-03-17 08:12:55 +01:00
. bootstrapTooltip ( { container : 'body' } )
2014-04-22 07:03:33 +02:00
. bootstrapTooltip ( 'show' )
2014-06-18 21:35:03 +02:00
2015-02-24 06:55:07 +01:00
assert . notEqual ( $ ( 'body > .tooltip' ) . length , 0 , 'tooltip is direct descendant of body' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '#qunit-fixture > .tooltip' ) . length , 0 , 'tooltip is not in parent' )
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( 'body > .tooltip' ) . length , 0 , 'tooltip was removed from dom' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should add position class before positioning so that position-specific styles are taken into account' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2014-07-06 11:56:12 +02:00
var styles = '<style>'
+ '.tooltip.right { white-space: nowrap; }'
+ '.tooltip.right .tooltip-inner { max-width: none; }'
+ '</style>'
2014-07-09 00:38:44 +02:00
var $styles = $ ( styles ) . appendTo ( 'head' )
2014-06-18 21:35:03 +02:00
2014-07-07 07:12:26 +02:00
var $container = $ ( '<div/>' ) . appendTo ( '#qunit-fixture' )
2014-06-18 21:35:03 +02:00
var $target = $ ( '<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>' )
. appendTo ( $container )
. bootstrapTooltip ( {
placement : 'right' ,
viewport : null
} )
. bootstrapTooltip ( 'show' )
var $tooltip = $container . find ( '.tooltip' )
2014-02-13 08:55:12 +01:00
// this is some dumb hack shit because sub pixels in firefox
2014-06-18 21:35:03 +02:00
var top = Math . round ( $target . offset ( ) . top + ( $target [ 0 ] . offsetHeight / 2 ) - ( $tooltip [ 0 ] . offsetHeight / 2 ) )
var top2 = Math . round ( $tooltip . offset ( ) . top )
2014-03-17 08:12:55 +01:00
var topDiff = top - top2
2015-02-24 06:55:07 +01:00
assert . ok ( topDiff <= 1 && topDiff >= - 1 )
2014-06-18 21:35:03 +02:00
$target . bootstrapTooltip ( 'hide' )
$container . remove ( )
$styles . remove ( )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should use title attribute for tooltip text' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-06-18 21:35:03 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Simple tooltip"/>' )
2014-02-13 08:55:12 +01:00
. appendTo ( '#qunit-fixture' )
2014-06-18 21:35:03 +02:00
. bootstrapTooltip ( )
$tooltip . bootstrapTooltip ( 'show' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . children ( '.tooltip-inner' ) . text ( ) , 'Simple tooltip' , 'title from title attribute is set' )
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should prefer title attribute over title option' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-06-18 21:35:03 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Simple tooltip"/>' )
2014-02-13 08:55:12 +01:00
. appendTo ( '#qunit-fixture' )
2014-04-22 07:03:33 +02:00
. bootstrapTooltip ( {
2014-02-13 08:55:12 +01:00
title : 'This is a tooltip with some content'
} )
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'show' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . children ( '.tooltip-inner' ) . text ( ) , 'Simple tooltip' , 'title is set from title attribute while preferred over title option' )
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-02-13 08:55:12 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should use title option' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-06-18 21:35:03 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip"/>' )
2014-02-13 08:55:12 +01:00
. appendTo ( '#qunit-fixture' )
2014-04-22 07:03:33 +02:00
. bootstrapTooltip ( {
2014-02-13 08:55:12 +01:00
title : 'This is a tooltip with some content'
} )
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'show' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . children ( '.tooltip-inner' ) . text ( ) , 'This is a tooltip with some content' , 'title from title option is set' )
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-06-18 21:35:03 +02:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should be placed dynamically with the dynamic placement option' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 6 )
2014-06-18 21:35:03 +02:00
var $style = $ ( '<style> a[rel="tooltip"] { display: inline-block; position: absolute; } </style>' )
var $container = $ ( '<div/>' )
. css ( {
position : 'absolute' ,
overflow : 'hidden' ,
width : 600 ,
height : 400 ,
top : 0 ,
left : 0
} )
. appendTo ( document . body )
var $topTooltip = $ ( '<div style="left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>' )
. appendTo ( $container )
2014-03-17 08:12:55 +01:00
. bootstrapTooltip ( { placement : 'auto' } )
2014-02-13 08:55:12 +01:00
2014-06-18 21:35:03 +02:00
$topTooltip . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.bottom' ) , 'top positioned tooltip is dynamically positioned to bottom' )
2014-02-13 08:55:12 +01:00
2014-06-18 21:35:03 +02:00
$topTooltip . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'top positioned tooltip removed from dom' )
2014-02-13 08:55:12 +01:00
2014-06-18 21:35:03 +02:00
var $rightTooltip = $ ( '<div style="right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>' )
. appendTo ( $container )
2014-03-17 08:12:55 +01:00
. bootstrapTooltip ( { placement : 'right auto' } )
2014-02-13 08:55:12 +01:00
2014-06-18 21:35:03 +02:00
$rightTooltip . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.left' ) , 'right positioned tooltip is dynamically positioned left' )
2014-02-13 08:55:12 +01:00
2014-06-18 21:35:03 +02:00
$rightTooltip . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'right positioned tooltip removed from dom' )
2014-06-18 21:35:03 +02:00
var $leftTooltip = $ ( '<div style="left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>' )
. appendTo ( $container )
2014-03-17 08:12:55 +01:00
. bootstrapTooltip ( { placement : 'auto left' } )
2014-02-13 08:55:12 +01:00
2014-06-18 21:35:03 +02:00
$leftTooltip . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.right' ) , 'left positioned tooltip is dynamically positioned right' )
2014-02-13 08:55:12 +01:00
2014-06-18 21:35:03 +02:00
$leftTooltip . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'left positioned tooltip removed from dom' )
2014-06-18 21:35:03 +02:00
$container . remove ( )
$style . remove ( )
2014-02-13 08:55:12 +01:00
} )
2013-07-24 08:50:23 +02:00
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should position tip on top if viewport has enough space and placement is "auto top"' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-09-09 15:17:06 +02:00
var styles = '<style>'
+ 'body { padding-top: 100px; }'
2014-09-17 23:33:22 +02:00
+ '#section { height: 300px; border: 1px solid red; padding-top: 50px }'
2014-09-09 15:17:06 +02:00
+ 'div[rel="tooltip"] { width: 150px; border: 1px solid blue; }'
+ '</style>'
var $styles = $ ( styles ) . appendTo ( 'head' )
2014-09-17 23:33:22 +02:00
var $container = $ ( '<div id="section"/>' ) . appendTo ( '#qunit-fixture' )
2014-09-09 15:17:06 +02:00
var $target = $ ( '<div rel="tooltip" title="tip"/>' )
. appendTo ( $container )
. bootstrapTooltip ( {
placement : 'auto top' ,
2014-09-17 23:33:22 +02:00
viewport : '#section'
2014-09-09 15:17:06 +02:00
} )
$target . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.top' ) , 'top positioned tooltip is dynamically positioned to top' )
2014-09-09 15:17:06 +02:00
$target . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-09-09 15:17:06 +02:00
$styles . remove ( )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should position tip on bottom if the tip\'s dimension exceeds the viewport area and placement is "auto top"' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-09-09 15:17:06 +02:00
var styles = '<style>'
+ 'body { padding-top: 100px; }'
2014-09-17 23:33:22 +02:00
+ '#section { height: 300px; border: 1px solid red; }'
2014-09-09 15:17:06 +02:00
+ 'div[rel="tooltip"] { width: 150px; border: 1px solid blue; }'
+ '</style>'
var $styles = $ ( styles ) . appendTo ( 'head' )
2014-09-17 23:33:22 +02:00
var $container = $ ( '<div id="section"/>' ) . appendTo ( '#qunit-fixture' )
2014-09-09 15:17:06 +02:00
var $target = $ ( '<div rel="tooltip" title="tip"/>' )
. appendTo ( $container )
. bootstrapTooltip ( {
placement : 'auto top' ,
2014-09-17 23:33:22 +02:00
viewport : '#section'
2014-09-09 15:17:06 +02:00
} )
$target . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.bottom' ) , 'top positioned tooltip is dynamically positioned to bottom' )
2014-09-09 15:17:06 +02:00
$target . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-09-09 15:17:06 +02:00
$styles . remove ( )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should display the tip on top whenever scrollable viewport has enough room if the given placement is "auto top"' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-10-10 08:19:45 +02:00
var styles = '<style>'
+ '#scrollable-div { height: 200px; overflow: auto; }'
+ '.tooltip-item { margin: 200px 0 400px; width: 150px; }'
+ '</style>'
var $styles = $ ( styles ) . appendTo ( 'head' )
var $container = $ ( '<div id="scrollable-div"/>' ) . appendTo ( '#qunit-fixture' )
var $target = $ ( '<div rel="tooltip" title="tip" class="tooltip-item">Tooltip Item</div>' )
. appendTo ( $container )
. bootstrapTooltip ( {
placement : 'top auto' ,
viewport : '#scrollable-div'
} )
$ ( '#scrollable-div' ) . scrollTop ( 100 )
$target . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.fade.top.in' ) , 'has correct classes applied' )
2014-10-10 08:19:45 +02:00
$target . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-10-10 08:19:45 +02:00
$styles . remove ( )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should display the tip on bottom whenever scrollable viewport doesn\'t have enough room if the given placement is "auto top"' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-10-10 08:19:45 +02:00
var styles = '<style>'
+ '#scrollable-div { height: 200px; overflow: auto; }'
2014-10-22 22:09:58 +02:00
+ '.tooltip-item { padding: 200px 0 400px; width: 150px; }'
2014-10-10 08:19:45 +02:00
+ '</style>'
var $styles = $ ( styles ) . appendTo ( 'head' )
var $container = $ ( '<div id="scrollable-div"/>' ) . appendTo ( '#qunit-fixture' )
var $target = $ ( '<div rel="tooltip" title="tip" class="tooltip-item">Tooltip Item</div>' )
. appendTo ( $container )
. bootstrapTooltip ( {
placement : 'top auto' ,
viewport : '#scrollable-div'
} )
$ ( '#scrollable-div' ) . scrollTop ( 200 )
$target . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.fade.bottom.in' ) , 'has correct classes applied' )
2014-10-10 08:19:45 +02:00
$target . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-10-10 08:19:45 +02:00
$styles . remove ( )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should display the tip on bottom whenever scrollable viewport has enough room if the given placement is "auto bottom"' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-10-10 08:19:45 +02:00
var styles = '<style>'
+ '#scrollable-div { height: 200px; overflow: auto; }'
2014-10-22 22:09:58 +02:00
+ '.spacer { height: 400px; }'
+ '.spacer:first-child { height: 200px; }'
+ '.tooltip-item { width: 150px; }'
2014-10-10 08:19:45 +02:00
+ '</style>'
var $styles = $ ( styles ) . appendTo ( 'head' )
var $container = $ ( '<div id="scrollable-div"/>' ) . appendTo ( '#qunit-fixture' )
var $target = $ ( '<div rel="tooltip" title="tip" class="tooltip-item">Tooltip Item</div>' )
. appendTo ( $container )
2014-10-22 22:09:58 +02:00
. before ( '<div class="spacer"/>' )
. after ( '<div class="spacer"/>' )
2014-10-10 08:19:45 +02:00
. bootstrapTooltip ( {
placement : 'bottom auto' ,
viewport : '#scrollable-div'
} )
$ ( '#scrollable-div' ) . scrollTop ( 200 )
$target . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.fade.bottom.in' ) , 'has correct classes applied' )
2014-10-10 08:19:45 +02:00
$target . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-10-10 08:19:45 +02:00
$styles . remove ( )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should display the tip on top whenever scrollable viewport doesn\'t have enough room if the given placement is "auto bottom"' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-10-10 08:19:45 +02:00
var styles = '<style>'
+ '#scrollable-div { height: 200px; overflow: auto; }'
+ '.tooltip-item { margin-top: 400px; width: 150px; }'
+ '</style>'
var $styles = $ ( styles ) . appendTo ( 'head' )
var $container = $ ( '<div id="scrollable-div"/>' ) . appendTo ( '#qunit-fixture' )
var $target = $ ( '<div rel="tooltip" title="tip" class="tooltip-item">Tooltip Item</div>' )
. appendTo ( $container )
. bootstrapTooltip ( {
placement : 'bottom auto' ,
viewport : '#scrollable-div'
} )
$ ( '#scrollable-div' ) . scrollTop ( 400 )
$target . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.fade.top.in' ) , 'has correct classes applied' )
2014-10-10 08:19:45 +02:00
$target . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-10-10 08:19:45 +02:00
$styles . remove ( )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should adjust the tip\'s top position when up against the top of the viewport' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-07-06 11:56:12 +02:00
var styles = '<style>'
+ '.tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
+ 'a[rel="tooltip"] { position: fixed; }'
+ '</style>'
2014-07-09 00:38:44 +02:00
var $styles = $ ( styles ) . appendTo ( 'head' )
2014-06-18 21:35:03 +02:00
2014-07-07 07:12:26 +02:00
var $container = $ ( '<div/>' ) . appendTo ( '#qunit-fixture' )
2014-06-18 21:35:03 +02:00
var $target = $ ( '<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;"/>' )
. appendTo ( $container )
. bootstrapTooltip ( {
placement : 'right' ,
viewport : {
selector : 'body' ,
padding : 12
}
} )
$target . bootstrapTooltip ( 'show' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( Math . round ( $container . find ( '.tooltip' ) . offset ( ) . top ) , 12 )
2014-01-20 20:54:22 +01:00
2014-06-18 21:35:03 +02:00
$target . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-01-20 20:54:22 +01:00
2014-06-18 21:35:03 +02:00
$styles . remove ( )
2014-01-20 20:54:22 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should adjust the tip\'s top position when up against the bottom of the viewport' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-07-06 11:56:12 +02:00
var styles = '<style>'
+ '.tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
+ 'a[rel="tooltip"] { position: fixed; }'
+ '</style>'
2014-07-09 00:38:44 +02:00
var $styles = $ ( styles ) . appendTo ( 'head' )
2014-06-18 21:35:03 +02:00
2014-07-07 07:12:26 +02:00
var $container = $ ( '<div/>' ) . appendTo ( '#qunit-fixture' )
2014-06-18 21:35:03 +02:00
var $target = $ ( '<a href="#" rel="tooltip" title="tip" style="bottom: 0px; left: 0px;"/>' )
. appendTo ( $container )
. bootstrapTooltip ( {
placement : 'right' ,
viewport : {
selector : 'body' ,
padding : 12
}
} )
2014-01-20 20:54:22 +01:00
2014-06-18 21:35:03 +02:00
$target . bootstrapTooltip ( 'show' )
var $tooltip = $container . find ( '.tooltip' )
2015-02-24 06:55:07 +01:00
assert . strictEqual ( Math . round ( $tooltip . offset ( ) . top ) , Math . round ( $ ( window ) . height ( ) - 12 - $tooltip [ 0 ] . offsetHeight ) )
2014-01-20 20:54:22 +01:00
2014-06-18 21:35:03 +02:00
$target . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-06-18 21:35:03 +02:00
$container . remove ( )
$styles . remove ( )
2014-01-20 20:54:22 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should adjust the tip\'s left position when up against the left of the viewport' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-07-06 11:56:12 +02:00
var styles = '<style>'
+ '.tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
+ 'a[rel="tooltip"] { position: fixed; }'
+ '</style>'
2014-07-09 00:38:44 +02:00
var $styles = $ ( styles ) . appendTo ( 'head' )
2014-06-18 21:35:03 +02:00
2014-07-07 07:12:26 +02:00
var $container = $ ( '<div/>' ) . appendTo ( '#qunit-fixture' )
2014-06-18 21:35:03 +02:00
var $target = $ ( '<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;"/>' )
. appendTo ( $container )
. bootstrapTooltip ( {
placement : 'bottom' ,
viewport : {
selector : 'body' ,
padding : 12
}
} )
$target . bootstrapTooltip ( 'show' )
2015-02-24 06:55:07 +01:00
assert . strictEqual ( Math . round ( $container . find ( '.tooltip' ) . offset ( ) . left ) , 12 )
2014-01-20 20:54:22 +01:00
2014-06-18 21:35:03 +02:00
$target . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-01-20 20:54:22 +01:00
2014-06-18 21:35:03 +02:00
$container . remove ( )
$styles . remove ( )
2014-01-20 20:54:22 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should adjust the tip\'s left position when up against the right of the viewport' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-07-06 11:56:12 +02:00
var styles = '<style>'
+ '.tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
+ 'a[rel="tooltip"] { position: fixed; }'
+ '</style>'
2014-07-09 00:38:44 +02:00
var $styles = $ ( styles ) . appendTo ( 'head' )
2014-01-20 20:54:22 +01:00
2014-06-18 21:35:03 +02:00
var $container = $ ( '<div/>' ) . appendTo ( 'body' )
var $target = $ ( '<a href="#" rel="tooltip" title="tip" style="top: 0px; right: 0px;"/>' )
. appendTo ( $container )
. bootstrapTooltip ( {
placement : 'bottom' ,
viewport : {
selector : 'body' ,
padding : 12
}
} )
$target . bootstrapTooltip ( 'show' )
var $tooltip = $container . find ( '.tooltip' )
2015-02-24 06:55:07 +01:00
assert . strictEqual ( Math . round ( $tooltip . offset ( ) . left ) , Math . round ( $ ( window ) . width ( ) - 12 - $tooltip [ 0 ] . offsetWidth ) )
2014-01-20 20:54:22 +01:00
2014-06-18 21:35:03 +02:00
$target . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-06-18 21:35:03 +02:00
$container . remove ( )
$styles . remove ( )
2014-01-20 20:54:22 +01:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should adjust the tip when up against the right of an arbitrary viewport' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-07-06 11:56:12 +02:00
var styles = '<style>'
+ '.tooltip, .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
+ '.container-viewport { position: absolute; top: 50px; left: 60px; width: 300px; height: 300px; }'
+ 'a[rel="tooltip"] { position: fixed; }'
+ '</style>'
2014-07-09 00:38:44 +02:00
var $styles = $ ( styles ) . appendTo ( 'head' )
2014-06-18 21:35:03 +02:00
var $container = $ ( '<div class="container-viewport"/>' ) . appendTo ( document . body )
var $target = $ ( '<a href="#" rel="tooltip" title="tip" style="top: 50px; left: 350px;"/>' )
. appendTo ( $container )
. bootstrapTooltip ( {
placement : 'bottom' ,
viewport : '.container-viewport'
} )
$target . bootstrapTooltip ( 'show' )
var $tooltip = $container . find ( '.tooltip' )
2015-02-24 06:55:07 +01:00
assert . strictEqual ( Math . round ( $tooltip . offset ( ) . left ) , Math . round ( 60 + $container . width ( ) - $tooltip [ 0 ] . offsetWidth ) )
2014-01-20 20:54:22 +01:00
2014-06-18 21:35:03 +02:00
$target . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2014-01-20 20:54:22 +01:00
2014-06-18 21:35:03 +02:00
$container . remove ( )
$styles . remove ( )
2014-01-20 20:54:22 +01:00
} )
2014-06-06 23:49:59 +02:00
2015-03-25 14:46:21 +01:00
QUnit . test ( 'should get viewport element from function' , function ( assert ) {
assert . expect ( 3 )
var styles = '<style>'
+ '.tooltip, .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
+ '.container-viewport { position: absolute; top: 50px; left: 60px; width: 300px; height: 300px; }'
+ 'a[rel="tooltip"] { position: fixed; }'
+ '</style>'
var $styles = $ ( styles ) . appendTo ( 'head' )
var $container = $ ( '<div class="container-viewport"/>' ) . appendTo ( document . body )
var $target = $ ( '<a href="#" rel="tooltip" title="tip" style="top: 50px; left: 350px;"/>' ) . appendTo ( $container )
$target
. bootstrapTooltip ( {
placement : 'bottom' ,
viewport : function ( $element ) {
assert . strictEqual ( $element [ 0 ] , $target [ 0 ] , 'viewport function was passed target as argument' )
return ( $element . closest ( '.container-viewport' ) )
}
} )
$target . bootstrapTooltip ( 'show' )
var $tooltip = $container . find ( '.tooltip' )
assert . strictEqual ( Math . round ( $tooltip . offset ( ) . left ) , Math . round ( 60 + $container . width ( ) - $tooltip [ 0 ] . offsetWidth ) )
$target . bootstrapTooltip ( 'hide' )
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
$container . remove ( )
$styles . remove ( )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should not error when trying to show an auto-placed tooltip that has been removed from the dom' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2014-06-18 21:35:03 +02:00
var passed = true
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
. appendTo ( '#qunit-fixture' )
2014-06-06 23:49:59 +02:00
. one ( 'show.bs.tooltip' , function ( ) {
2014-06-18 21:35:03 +02:00
$ ( this ) . remove ( )
2014-06-06 23:49:59 +02:00
} )
. bootstrapTooltip ( { placement : 'auto' } )
try {
2014-06-18 21:35:03 +02:00
$tooltip . bootstrapTooltip ( 'show' )
} catch ( err ) {
2014-06-06 23:49:59 +02:00
passed = false
console . log ( err )
}
2015-02-24 06:55:07 +01:00
assert . ok ( passed , '.tooltip(\'show\') should not throw an error if element no longer is in dom' )
2014-06-06 23:49:59 +02:00
} )
2014-07-07 07:12:26 +02:00
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should place tooltip on top of element' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-07-07 07:12:26 +02:00
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 ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( Math . round ( $tooltip . offset ( ) . top + $tooltip . outerHeight ( ) ) <= Math . round ( $trigger . offset ( ) . top ) )
2015-01-21 04:40:50 +01:00
done ( )
2014-07-07 07:12:26 +02:00
} , 0 )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should place tooltip inside viewport' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-07-07 07:12:26 +02:00
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 ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . offset ( ) . left >= 0 )
2015-01-21 04:40:50 +01:00
done ( )
2014-07-07 07:12:26 +02:00
} , 0 )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should show tooltip if leave event hasn\'t occurred before delay expires' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-07-07 07:12:26 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
. appendTo ( '#qunit-fixture' )
2014-10-27 23:53:41 +01:00
. bootstrapTooltip ( { delay : 150 } )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( ! $ ( '.tooltip' ) . is ( '.fade.in' ) , '100ms: tooltip is not faded in' )
2014-10-27 23:53:41 +01:00
} , 100 )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.fade.in' ) , '200ms: tooltip is faded in' )
2015-01-21 04:40:50 +01:00
done ( )
2014-10-27 23:53:41 +01:00
} , 200 )
2014-07-07 07:12:26 +02:00
$tooltip . trigger ( 'mouseenter' )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should not show tooltip if leave event occurs before delay expires' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-07-07 07:12:26 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
. appendTo ( '#qunit-fixture' )
2014-10-27 23:53:41 +01:00
. bootstrapTooltip ( { delay : 150 } )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( ! $ ( '.tooltip' ) . is ( '.fade.in' ) , '100ms: tooltip not faded in' )
2014-07-07 07:12:26 +02:00
$tooltip . trigger ( 'mouseout' )
2014-10-27 23:53:41 +01:00
} , 100 )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( ! $ ( '.tooltip' ) . is ( '.fade.in' ) , '200ms: tooltip not faded in' )
2015-01-21 04:40:50 +01:00
done ( )
2014-10-27 23:53:41 +01:00
} , 200 )
2014-07-07 07:12:26 +02:00
$tooltip . trigger ( 'mouseenter' )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should not hide tooltip if leave event occurs and enter event occurs within the hide delay' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 3 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-07-07 07:12:26 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
. appendTo ( '#qunit-fixture' )
2014-10-27 23:53:41 +01:00
. bootstrapTooltip ( { delay : { show : 0 , hide : 150 } } )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.fade.in' ) , '1ms: tooltip faded in' )
2014-07-07 07:12:26 +02:00
$tooltip . trigger ( 'mouseout' )
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.fade.in' ) , '100ms: tooltip still faded in' )
2014-07-07 07:12:26 +02:00
$tooltip . trigger ( 'mouseenter' )
2014-10-27 23:53:41 +01:00
} , 100 )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( $ ( '.tooltip' ) . is ( '.fade.in' ) , '200ms: tooltip still faded in' )
2015-01-21 04:40:50 +01:00
done ( )
2014-10-27 23:53:41 +01:00
} , 200 )
2014-07-07 07:12:26 +02:00
} , 0 )
$tooltip . trigger ( 'mouseenter' )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should not show tooltip if leave event occurs before delay expires' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-07-07 07:12:26 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
. appendTo ( '#qunit-fixture' )
2014-10-27 23:53:41 +01:00
. bootstrapTooltip ( { delay : 150 } )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( ! $ ( '.tooltip' ) . is ( '.fade.in' ) , '100ms: tooltip not faded in' )
2014-07-07 07:12:26 +02:00
$tooltip . trigger ( 'mouseout' )
2014-10-27 23:53:41 +01:00
} , 100 )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( ! $ ( '.tooltip' ) . is ( '.fade.in' ) , '200ms: tooltip not faded in' )
2015-01-21 04:40:50 +01:00
done ( )
2014-10-27 23:53:41 +01:00
} , 200 )
2014-07-07 07:12:26 +02:00
$tooltip . trigger ( 'mouseenter' )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should not show tooltip if leave event occurs before delay expires, even if hide delay is 0' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-07-07 07:12:26 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
. appendTo ( '#qunit-fixture' )
2014-10-27 23:53:41 +01:00
. bootstrapTooltip ( { delay : { show : 150 , hide : 0 } } )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( ! $ ( '.tooltip' ) . is ( '.fade.in' ) , '100ms: tooltip not faded in' )
2014-07-07 07:12:26 +02:00
$tooltip . trigger ( 'mouseout' )
2014-10-27 23:53:41 +01:00
} , 100 )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( ! $ ( '.tooltip' ) . is ( '.fade.in' ) , '250ms: tooltip not faded in' )
2015-01-21 04:40:50 +01:00
done ( )
2014-10-27 23:53:41 +01:00
} , 250 )
2014-07-07 07:12:26 +02:00
$tooltip . trigger ( 'mouseenter' )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should wait 200ms before hiding the tooltip' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 3 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-07-07 07:12:26 +02:00
var $tooltip = $ ( '<a href="#" rel="tooltip" title="Another tooltip"/>' )
. appendTo ( '#qunit-fixture' )
2014-10-27 23:53:41 +01:00
. bootstrapTooltip ( { delay : { show : 0 , hide : 150 } } )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( $tooltip . data ( 'bs.tooltip' ) . $tip . is ( '.fade.in' ) , '1ms: tooltip faded in' )
2014-07-07 07:12:26 +02:00
$tooltip . trigger ( 'mouseout' )
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( $tooltip . data ( 'bs.tooltip' ) . $tip . is ( '.fade.in' ) , '100ms: tooltip still faded in' )
2014-10-27 23:53:41 +01:00
} , 100 )
2014-07-07 07:12:26 +02:00
setTimeout ( function ( ) {
2015-02-24 06:55:07 +01:00
assert . ok ( ! $tooltip . data ( 'bs.tooltip' ) . $tip . is ( '.in' ) , '200ms: tooltip removed' )
2015-01-21 04:40:50 +01:00
done ( )
2014-10-27 23:53:41 +01:00
} , 200 )
2014-07-07 07:12:26 +02:00
} , 0 )
$tooltip . trigger ( 'mouseenter' )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should correctly position tooltips on SVG elements' , function ( assert ) {
2014-08-01 01:03:45 +02:00
if ( ! window . SVGElement ) {
// Skip IE8 since it doesn't support SVG
2015-02-24 06:55:07 +01:00
assert . expect ( 0 )
2014-08-01 01:03:45 +02:00
return
}
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-08-01 01:03:45 +02:00
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-08-01 01:03:45 +02:00
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 ( )
2015-02-24 06:55:07 +01:00
assert . ok ( Math . abs ( offset . left - 88 ) <= 1 , 'tooltip has correct horizontal location' )
2014-09-16 05:01:04 +02:00
$circle . bootstrapTooltip ( 'hide' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2015-01-21 04:40:50 +01:00
done ( )
2014-08-01 01:03:45 +02:00
} )
. bootstrapTooltip ( { container : 'body' , placement : 'top' , trigger : 'manual' } )
$circle . bootstrapTooltip ( 'show' )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should correctly determine auto placement based on container rather than parent' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-09-15 21:36:40 +02:00
var styles = '<style>'
+ '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
+ '.tooltip { position: absolute; display: block; font-size: 12px; line-height: 1.4; }'
+ '.tooltip .tooltip-inner { max-width: 200px; padding: 3px 8px; font-family: Helvetica; text-align: center; }'
+ '#trigger-parent {'
+ ' position: fixed;'
+ ' top: 100px;'
+ ' right: 17px;'
+ '}'
+ '</style>'
var $styles = $ ( styles ) . appendTo ( 'head' )
$ ( '#qunit-fixture' ) . append ( '<span id="trigger-parent"><a id="tt-trigger" title="If a_larger_text is written here, it won\'t fit using older broken version of BS">HOVER OVER ME</a></span>' )
var $trigger = $ ( '#tt-trigger' )
$trigger
. on ( 'shown.bs.tooltip' , function ( ) {
var $tip = $ ( '.tooltip-inner' )
var tipXrightEdge = $tip . offset ( ) . left + $tip . width ( )
var triggerXleftEdge = $trigger . offset ( ) . left
2015-02-24 06:55:07 +01:00
assert . ok ( tipXrightEdge < triggerXleftEdge , 'tooltip with auto left placement, when near the right edge of the viewport, gets left placement' )
2014-09-15 21:36:40 +02:00
$trigger . bootstrapTooltip ( 'hide' )
} )
. on ( 'hidden.bs.tooltip' , function ( ) {
$styles . remove ( )
$ ( this ) . remove ( )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2015-01-21 04:40:50 +01:00
done ( )
2014-09-15 21:36:40 +02:00
} )
. bootstrapTooltip ( {
container : 'body' ,
placement : 'auto left' ,
trigger : 'manual'
} )
$trigger . bootstrapTooltip ( 'show' )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should not reload the tooltip on subsequent mouseenter events' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2014-08-04 22:03:11 +02:00
var titleHtml = function ( ) {
var uid = $ . fn . bootstrapTooltip . Constructor . prototype . getUID ( 'tooltip' )
return '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
}
var $tooltip = $ ( '<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>' )
. appendTo ( '#qunit-fixture' )
$tooltip . bootstrapTooltip ( {
html : true ,
animation : false ,
trigger : 'hover' ,
delay : { show : 0 , hide : 500 } ,
container : $tooltip ,
title : titleHtml
} )
$ ( '#tt-outer' ) . trigger ( 'mouseenter' )
var currentUid = $ ( '#tt-content' ) . text ( )
$ ( '#tt-content' ) . trigger ( 'mouseenter' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( currentUid , $ ( '#tt-content' ) . text ( ) )
2014-08-04 22:03:11 +02:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should not reload the tooltip if the mouse leaves and re-enters before hiding' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 4 )
2014-08-04 22:03:11 +02:00
var titleHtml = function ( ) {
var uid = $ . fn . bootstrapTooltip . Constructor . prototype . getUID ( 'tooltip' )
return '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
}
var $tooltip = $ ( '<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>' )
. appendTo ( '#qunit-fixture' )
$tooltip . bootstrapTooltip ( {
html : true ,
animation : false ,
trigger : 'hover' ,
delay : { show : 0 , hide : 500 } ,
container : $tooltip ,
title : titleHtml
} )
var obj = $tooltip . data ( 'bs.tooltip' )
$ ( '#tt-outer' ) . trigger ( 'mouseenter' )
var currentUid = $ ( '#tt-content' ) . text ( )
$ ( '#tt-outer' ) . trigger ( 'mouseleave' )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( currentUid , $ ( '#tt-content' ) . text ( ) )
2014-08-04 22:03:11 +02:00
2015-02-24 06:55:07 +01:00
assert . ok ( obj . hoverState == 'out' , 'the tooltip hoverState should be set to "out"' )
2014-08-04 22:03:11 +02:00
$ ( '#tt-content' ) . trigger ( 'mouseenter' )
2015-02-24 06:55:07 +01:00
assert . ok ( obj . hoverState == 'in' , 'the tooltip hoverState should be set to "in"' )
2014-08-04 22:03:11 +02:00
2015-02-24 07:41:08 +01:00
assert . strictEqual ( currentUid , $ ( '#tt-content' ) . text ( ) )
2014-08-04 22:03:11 +02:00
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should position arrow correctly when tooltip is moved to not appear offscreen' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-06-03 17:02:06 +02:00
var styles = '<style>'
+ '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
+ '.tooltip { position: absolute; }'
+ '.tooltip-arrow { position: absolute; width: 0; height: 0; }'
+ '.tooltip .tooltip-inner { max-width: 200px; padding: 3px 8px; }'
+ '</style>'
var $styles = $ ( styles ) . appendTo ( 'head' )
$ ( '<a href="#" title="tooltip title" style="position: absolute; bottom: 0; right: 0;">Foobar</a>' )
. appendTo ( 'body' )
. on ( 'shown.bs.tooltip' , function ( ) {
var arrowStyles = $ ( this ) . data ( 'bs.tooltip' ) . $tip . find ( '.tooltip-arrow' ) . attr ( 'style' )
2015-02-24 06:55:07 +01:00
assert . ok ( /left/i . test ( arrowStyles ) && ! /top/i . test ( arrowStyles ) , 'arrow positioned correctly' )
2014-06-03 17:02:06 +02:00
$ ( this ) . bootstrapTooltip ( 'hide' )
} )
. on ( 'hidden.bs.tooltip' , function ( ) {
$styles . remove ( )
$ ( this ) . remove ( )
2015-02-24 07:41:08 +01:00
assert . strictEqual ( $ ( '.tooltip' ) . length , 0 , 'tooltip removed from dom' )
2015-01-21 04:40:50 +01:00
done ( )
2014-06-03 17:02:06 +02:00
} )
. bootstrapTooltip ( {
container : 'body' ,
placement : 'top' ,
trigger : 'manual'
} )
. bootstrapTooltip ( 'show' )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should correctly position tooltips on transformed elements' , function ( assert ) {
2014-09-11 23:40:15 +02:00
var styleProps = document . documentElement . style
if ( ! ( 'transform' in styleProps ) && ! ( 'webkitTransform' in styleProps ) && ! ( 'msTransform' in styleProps ) ) {
2015-02-24 06:55:07 +01:00
assert . expect ( 0 )
2014-09-11 23:40:15 +02:00
return
}
2015-03-01 15:33:48 +01:00
assert . expect ( 2 )
2014-09-11 23:40:15 +02:00
2015-01-21 04:40:50 +01:00
var done = assert . async ( )
2014-09-11 23:40:15 +02:00
var styles = '<style>'
+ '#qunit-fixture { top: 0; left: 0; }'
+ '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
+ '.tooltip { position: absolute; }'
+ '.tooltip .tooltip-inner { width: 24px; height: 24px; font-family: Helvetica; }'
+ '#target { position: absolute; top: 100px; left: 50px; width: 100px; height: 200px; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }'
+ '</style>'
var $styles = $ ( styles ) . appendTo ( 'head' )
var $element = $ ( '<div id="target" title="1"/>' ) . appendTo ( '#qunit-fixture' )
$element
. on ( 'shown.bs.tooltip' , function ( ) {
var offset = $ ( '.tooltip' ) . offset ( )
$styles . remove ( )
2015-02-24 06:55:07 +01:00
assert . ok ( Math . abs ( offset . left - 88 ) <= 1 , 'tooltip has correct horizontal location' )
assert . ok ( Math . abs ( offset . top - 126 ) <= 1 , 'tooltip has correct vertical location' )
2014-09-11 23:40:15 +02:00
$element . bootstrapTooltip ( 'hide' )
2015-01-21 04:40:50 +01:00
done ( )
2014-09-11 23:40:15 +02:00
} )
. bootstrapTooltip ( {
container : 'body' ,
placement : 'top' ,
trigger : 'manual'
} )
$element . bootstrapTooltip ( 'show' )
} )
2015-02-24 07:04:48 +01:00
QUnit . test ( 'should throw an error when initializing tooltip on the document object without specifying a delegation selector' , function ( assert ) {
2015-03-01 15:33:48 +01:00
assert . expect ( 1 )
2015-02-24 06:55:07 +01:00
assert . throws ( function ( ) {
2015-01-05 23:22:49 +01:00
$ ( document ) . bootstrapTooltip ( { title : 'What am I on?' } )
} , new Error ( '`selector` option must be specified when initializing tooltip on the window.document object!' ) )
} )
2015-03-03 22:32:24 +01:00
QUnit . test ( 'should do nothing when an attempt is made to hide an uninitialized tooltip' , function ( assert ) {
assert . expect ( 1 )
var $tooltip = $ ( '<span data-toggle="tooltip" title="some tip">some text</span>' )
. appendTo ( '#qunit-fixture' )
. on ( 'hidden.bs.tooltip shown.bs.tooltip' , function ( ) {
assert . ok ( false , 'should not fire any tooltip events' )
} )
. bootstrapTooltip ( 'hide' )
assert . strictEqual ( $tooltip . data ( 'bs.tooltip' ) , undefined , 'should not initialize the tooltip' )
} )
2012-12-20 10:36:57 +01:00
} )