library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Tooltip: Add classes option

Browse Source 
Ref #7053
Ref gh-1411
This commit is contained in:
Alexander Schmitz 2014-12-03 11:30:22 -05:00
parent aaddfbfa8b
commit 9d71547394
10 changed files with 142 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demos/autocomplete/combobox.html
View File

@ -58,7 +58,9 @@
source: $.proxy( this, "_source" )
})
.tooltip({
tooltipClass: "ui-state-highlight"
classes: {
"ui-tooltip": "ui-state-highlight"
}
});
this._on( this.input, {

4
tests/unit/tooltip/tooltip.html
View File

@ -5,10 +5,14 @@
<title>jQuery UI Tooltip Test Suite</title>
<script src="../../jquery.js"></script>
<script>
$.uiBackCompat = false;
</script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "tooltip" ],

5
tests/unit/tooltip/tooltip_common.js
View File

@ -1,6 +1,8 @@
TestHelpers.commonWidgetTests( "tooltip", {
defaults: {
classes: {},
classes: {
"ui-tooltip": "ui-corner-all ui-widget-shadow"
},
content: function() {},
disabled: false,
hide: true,
@ -11,7 +13,6 @@ TestHelpers.commonWidgetTests( "tooltip", {
collision: "flipfit flip"
},
show: true,
tooltipClass: null,
track: false,
// callbacks

24
tests/unit/tooltip/tooltip_common_deprecated.js Normal file
View File

@ -0,0 +1,24 @@
TestHelpers.commonWidgetTests( "tooltip", {
defaults: {
classes: {
"ui-tooltip": "ui-corner-all ui-widget-shadow"
},
content: function() {},
disabled: false,
hide: true,
items: "[title]:not([disabled])",
position: {
my: "left top+15",
at: "left bottom",
collision: "flipfit flip"
},
show: true,
tooltipClass: null,
track: false,
// callbacks
close: null,
create: null,
open: null
}
});

6
tests/unit/tooltip/tooltip_core.js
View File

@ -2,7 +2,7 @@
module( "tooltip: core" );
test( "markup structure", function() {
test( "markup structure", function( assert ) {
expect( 7 );
var element = $( "#tooltipped1" ).tooltip(),
tooltip = $( ".ui-tooltip" );
@ -13,8 +13,8 @@ test( "markup structure", function() {
element.tooltip( "open" );
tooltip = $( "#" + element.data( "ui-tooltip-id" ) );
equal( tooltip.length, 1, "tooltip exists" );
equal( element.attr( "aria-describedby"), tooltip.attr( "id" ), "aria-describedby" );
ok( tooltip.hasClass( "ui-tooltip" ), "tooltip is .ui-tooltip" );
equal( element.attr( "aria-describedby" ), tooltip.attr( "id" ), "aria-describedby" );
assert.hasClasses( tooltip, "ui-tooltip ui-widget ui-widget-content ui-widget-shadow" );
equal( tooltip.length, 1, ".ui-tooltip exists" );
equal( tooltip.find( ".ui-tooltip-content" ).length, 1,
".ui-tooltip-content exists" );

53
tests/unit/tooltip/tooltip_deprecated.html Normal file
View File

@ -0,0 +1,53 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "tooltip" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/position.js",
"ui/tooltip.js"
]
});
</script>
<script src="tooltip_common_deprecated.js"></script>
<script src="tooltip_core.js"></script>
<script src="tooltip_events.js"></script>
<script src="tooltip_methods.js"></script>
<script src="tooltip_options.js"></script>
<script src="tooltip_deprecated.js"></script>
<script src="../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div>
<a id="tooltipped1" href="#" title="anchortitle">anchor</a>
<input title="inputtitle">
<span id="multiple-describedby" aria-describedby="fixture-span" title="...">aria-describedby</span>
<span id="fixture-span" title="title-text">span</span>
<span id="contains-tooltipped" title="parent"><span id="contained-tooltipped" title="child">baz</span></span>
</div>
<form id="tooltip-form">
<input name="title" title="attroperties">
</form>
</div>
</body>
</html>

13
tests/unit/tooltip/tooltip_deprecated.js Normal file
View File

@ -0,0 +1,13 @@
(function( $ ) {
module( "tooltip: (deprecated) options" );
test( "tooltipClass", function() {
expect( 1 );
var element = $( "#tooltipped1" ).tooltip({
tooltipClass: "custom"
}).tooltip( "open" );
ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) );
});
}( jQuery ) );

8
tests/unit/tooltip/tooltip_options.js
View File

@ -166,14 +166,6 @@ test( "items", function() {
element.tooltip( "destroy" );
});
test( "tooltipClass", function() {
expect( 1 );
var element = $( "#tooltipped1" ).tooltip({
tooltipClass: "custom"
}).tooltip( "open" );
ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) );
});
test( "track + show delay", function() {
expect( 2 );
var event,

12
tests/visual/tooltip/tooltip.html
View File

@ -22,10 +22,14 @@
// custom class, replaces ui-widget-content
$( "#context2" ).tooltip({
tooltipClass: "ui-widget-header"
classes: {
"ui-tooltip": "ui-corner-all ui-widget-header"
}
});
$( "#right1" ).tooltip({
tooltipClass: "ui-state-error"
classes: {
"ui-tooltip": "ui-corner-all ui-state-error"
}
});
// synchronous content
@ -63,7 +67,9 @@
// custom position
$( "#right2" ).tooltip({
tooltipClass: "ui-state-highlight",
classes: {
"ui-tooltip": "ui-corner-all ui-state-highlight"
},
position: {
my: "center top",
at: "center bottom+10"

41
ui/tooltip.js
View File

@ -33,9 +33,12 @@
}
}(function( $ ) {
return $.widget( "ui.tooltip", {
$.widget( "ui.tooltip", {
version: "@VERSION",
options: {
classes: {
"ui-tooltip": "ui-corner-all ui-widget-shadow"
},
content: function() {
// support: IE<9, Opera in jQuery <1.7
// .text() can't accept undefined, so coerce to a string
@ -52,7 +55,6 @@ return $.widget( "ui.tooltip", {
collision: "flipfit flip"
},
show: true,
tooltipClass: null,
track: false,
// callbacks
@ -109,8 +111,8 @@ return $.widget( "ui.tooltip", {
"aria-live": "assertive",
"aria-relevant": "additions"
})
.addClass( "ui-helper-hidden-accessible" )
.appendTo( this.document[ 0 ].body );
this._addClass( this.liveRegion, null, "ui-helper-hidden-accessible" );
},
_setOption: function( key, value ) {
@ -419,16 +421,12 @@ return $.widget( "ui.tooltip", {
},
_tooltip: function( element ) {
var tooltip = $( "<div>" )
.attr( "role", "tooltip" )
// TODO move to classes option
.addClass( "ui-tooltip ui-widget ui-widget-shadow ui-corner-all ui-widget-content " +
( this.options.tooltipClass || "" ) ),
var tooltip = $( "<div>" ).attr( "role", "tooltip" ),
content = $( "<div>" ).appendTo( tooltip ),
id = tooltip.uniqueId().attr( "id" );
$( "<div>" )
.addClass( "ui-tooltip-content" )
.appendTo( tooltip );
this._addClass( content, "ui-tooltip-content" );
this._addClass( tooltip, "ui-tooltip", "ui-widget ui-widget-content" );
tooltip.appendTo( this.document[0].body );
@ -476,4 +474,25 @@ return $.widget( "ui.tooltip", {
}
});
// DEPRECATED
// TODO: Switch return back to widget declaration at top of file when this is removed
if ( $.uiBackCompat !== false ) {
// Backcompat for tooltipClass option
$.widget( "ui.tooltip", $.ui.tooltip, {
options: {
tooltipClass: null
},
_tooltip: function() {
var tooltipData = this._superApply( arguments );
if ( this.options.tooltipClass ) {
tooltipData.tooltip.addClass( this.options.tooltipClass );
}
return tooltipData;
}
});
}
return $.ui.tooltip;
}));