Skip to content

Commit 769f68e

Browse files
committed
Tooltip: Add classes option
1 parent ecf672b commit 769f68e

File tree

8 files changed

+136
-21
lines changed

8 files changed

+136
-21
lines changed

tests/unit/tooltip/tooltip.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
<title>jQuery UI Tooltip Test Suite</title>
66

77
<script src="../../jquery.js"></script>
8+
<script>
9+
$.uiBackCompat = false;
10+
</script>
811
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
912
<script src="../../../external/qunit/qunit.js"></script>
1013
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>

tests/unit/tooltip/tooltip_common.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
TestHelpers.commonWidgetTests( "tooltip", {
22
defaults: {
33
content: function() {},
4+
classes: {
5+
"ui-tooltip": "ui-corner-all",
6+
"ui-tooltip-content": ""
7+
},
48
disabled: false,
59
hide: true,
610
items: "[title]:not([disabled])",
@@ -10,7 +14,6 @@ TestHelpers.commonWidgetTests( "tooltip", {
1014
collision: "flipfit flip"
1115
},
1216
show: true,
13-
tooltipClass: null,
1417
track: false,
1518

1619
// callbacks
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
TestHelpers.commonWidgetTests( "tooltip", {
2+
defaults: {
3+
classes: {
4+
"ui-tooltip": "ui-corner-all",
5+
"ui-tooltip-content": ""
6+
},
7+
content: function() {},
8+
disabled: false,
9+
hide: true,
10+
items: "[title]:not([disabled])",
11+
position: {
12+
my: "left top+15",
13+
at: "left bottom",
14+
collision: "flipfit flip"
15+
},
16+
show: true,
17+
tooltipClass: null,
18+
track: false,
19+
20+
// callbacks
21+
close: null,
22+
create: null,
23+
open: null
24+
}
25+
});
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Tooltip Test Suite</title>
6+
7+
<script src="../../jquery.js"></script>
8+
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
9+
<script src="../../../external/qunit/qunit.js"></script>
10+
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
11+
<script src="../testsuite.js"></script>
12+
<script>
13+
TestHelpers.loadResources({
14+
css: [ "core", "tooltip" ],
15+
js: [
16+
"ui/core.js",
17+
"ui/widget.js",
18+
"ui/position.js",
19+
"ui/tooltip.js"
20+
]
21+
});
22+
</script>
23+
24+
<script src="tooltip_common_deprecated.js"></script>
25+
<script src="tooltip_core.js"></script>
26+
<script src="tooltip_events.js"></script>
27+
<script src="tooltip_methods.js"></script>
28+
<script src="tooltip_options.js"></script>
29+
<script src="tooltip_deprecated.js"></script>
30+
31+
<script src="../swarminject.js"></script>
32+
</head>
33+
<body>
34+
35+
<div id="qunit"></div>
36+
<div id="qunit-fixture">
37+
38+
<div>
39+
<a id="tooltipped1" href="#" title="anchortitle">anchor</a>
40+
<input title="inputtitle">
41+
<span id="multiple-describedby" aria-describedby="fixture-span" title="...">aria-describedby</span>
42+
<span id="fixture-span" title="title-text">span</span>
43+
<span id="contains-tooltipped" title="parent"><span id="contained-tooltipped" title="child">baz</span></span>
44+
</div>
45+
46+
<form id="tooltip-form">
47+
<input name="title" title="attroperties">
48+
</form>
49+
50+
</div>
51+
</body>
52+
</html>
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*
2+
* dialog_deprecated.js
3+
*/
4+
(function( $ ) {
5+
6+
module( "tooltip: (deprecated) options" );
7+
8+
test( "tooltipClass", function() {
9+
expect( 1 );
10+
var element = $( "#tooltipped1" ).tooltip({
11+
tooltipClass: "custom"
12+
}).tooltip( "open" );
13+
ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) );
14+
});
15+
16+
}( jQuery ) );

tests/unit/tooltip/tooltip_options.js

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -120,14 +120,6 @@ test( "items", function() {
120120
element.tooltip( "destroy" );
121121
});
122122

123-
test( "tooltipClass", function() {
124-
expect( 1 );
125-
var element = $( "#tooltipped1" ).tooltip({
126-
tooltipClass: "custom"
127-
}).tooltip( "open" );
128-
ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) );
129-
});
130-
131123
test( "track + show delay", function() {
132124
expect( 2 );
133125
var event,

tests/visual/tooltip/tooltip.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,14 @@
2222

2323
// custom class, replaces ui-widget-content
2424
$( "#context2" ).tooltip({
25-
tooltipClass: "ui-widget-header"
25+
classes: {
26+
"ui-tooltip": "ui-widget-header"
27+
}
2628
});
2729
$( "#right1" ).tooltip({
28-
tooltipClass: "ui-state-error"
30+
classes: {
31+
"ui-tooltip": "ui-state-error"
32+
}
2933
});
3034

3135
// synchronous content
@@ -63,7 +67,9 @@
6367

6468
// custom position
6569
$( "#right2" ).tooltip({
66-
tooltipClass: "ui-state-highlight",
70+
classes: {
71+
"ui-tooltip" : "ui-corner-all ui-state-highlight"
72+
},
6773
position: {
6874
my: "center top",
6975
at: "center bottom+10"

ui/tooltip.js

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,13 @@
2525
}
2626
}(function( $ ) {
2727

28-
return $.widget( "ui.tooltip", {
28+
$.widget( "ui.tooltip", {
2929
version: "@VERSION",
3030
options: {
31+
classes: {
32+
"ui-tooltip": "ui-corner-all",
33+
"ui-tooltip-content": ""
34+
},
3135
content: function() {
3236
// support: IE<9, Opera in jQuery <1.7
3337
// .text() can't accept undefined, so coerce to a string
@@ -44,7 +48,6 @@ return $.widget( "ui.tooltip", {
4448
collision: "flipfit flip"
4549
},
4650
show: true,
47-
tooltipClass: null,
4851
track: false,
4952

5053
// callbacks
@@ -402,15 +405,12 @@ return $.widget( "ui.tooltip", {
402405
},
403406

404407
_tooltip: function( element ) {
405-
var tooltip = $( "<div>" )
406-
.attr( "role", "tooltip" )
407-
.addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content " +
408-
( this.options.tooltipClass || "" ) ),
408+
var tooltip = $( "<div>" ).attr( "role", "tooltip" ),
409+
content = $( "<div>" ).appendTo( tooltip ),
409410
id = tooltip.uniqueId().attr( "id" );
410411

411-
$( "<div>" )
412-
.addClass( "ui-tooltip-content" )
413-
.appendTo( tooltip );
412+
this._addClass( content, "ui-tooltip-content" );
413+
this._addClass( tooltip, "ui-tooltip", "ui-widget ui-widget-content" );
414414

415415
tooltip.appendTo( this.document[0].body );
416416

@@ -458,4 +458,22 @@ return $.widget( "ui.tooltip", {
458458
}
459459
});
460460

461+
// DEPRECATED
462+
if ( $.uiBackCompat !== false ) {
463+
464+
// TooltipClass option
465+
$.widget( "ui.tooltip", $.ui.tooltip, {
466+
options: {
467+
tooltipClass: null
468+
},
469+
_tooltip: function() {
470+
var tooltip = this._superApply( arguments );
471+
tooltip.tooltip.addClass( this.options.tooltipClass || "" );
472+
return tooltip;
473+
}
474+
});
475+
}
476+
477+
return $.ui.tooltip;
478+
461479
}));

0 commit comments

Comments
 (0)