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 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" ) source: $.proxy( this, "_source" )
}) })
.tooltip({ .tooltip({
tooltipClass: "ui-state-highlight" classes: {
"ui-tooltip": "ui-state-highlight"
}
}); });
this._on( this.input, { this._on( this.input, {

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

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

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

@ -1,6 +1,8 @@
TestHelpers.commonWidgetTests( "tooltip", { TestHelpers.commonWidgetTests( "tooltip", {
defaults: { defaults: {
classes: {}, classes: {
"ui-tooltip": "ui-corner-all ui-widget-shadow"
},
content: function() {}, content: function() {},
disabled: false, disabled: false,
hide: true, hide: true,
@ -11,7 +13,6 @@ TestHelpers.commonWidgetTests( "tooltip", {
collision: "flipfit flip" collision: "flipfit flip"
}, },
show: true, show: true,
tooltipClass: null,
track: false, track: false,
// callbacks // 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" ); module( "tooltip: core" );
test( "markup structure", function() { test( "markup structure", function( assert ) {
expect( 7 ); expect( 7 );
var element = $( "#tooltipped1" ).tooltip(), var element = $( "#tooltipped1" ).tooltip(),
tooltip = $( ".ui-tooltip" ); tooltip = $( ".ui-tooltip" );
@ -13,8 +13,8 @@ test( "markup structure", function() {
element.tooltip( "open" ); element.tooltip( "open" );
tooltip = $( "#" + element.data( "ui-tooltip-id" ) ); tooltip = $( "#" + element.data( "ui-tooltip-id" ) );
equal( tooltip.length, 1, "tooltip exists" ); equal( tooltip.length, 1, "tooltip exists" );
equal( element.attr( "aria-describedby"), tooltip.attr( "id" ), "aria-describedby" ); equal( element.attr( "aria-describedby" ), tooltip.attr( "id" ), "aria-describedby" );
ok( tooltip.hasClass( "ui-tooltip" ), "tooltip is .ui-tooltip" ); assert.hasClasses( tooltip, "ui-tooltip ui-widget ui-widget-content ui-widget-shadow" );
equal( tooltip.length, 1, ".ui-tooltip exists" ); equal( tooltip.length, 1, ".ui-tooltip exists" );
equal( tooltip.find( ".ui-tooltip-content" ).length, 1, equal( tooltip.find( ".ui-tooltip-content" ).length, 1,
".ui-tooltip-content exists" ); ".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" ); 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() { test( "track + show delay", function() {
expect( 2 ); expect( 2 );
var event, var event,

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

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

41
ui/tooltip.js
View File

@ -33,9 +33,12 @@
} }
}(function( $ ) { }(function( $ ) {
return $.widget( "ui.tooltip", { $.widget( "ui.tooltip", {
version: "@VERSION", version: "@VERSION",
options: { options: {
classes: {
"ui-tooltip": "ui-corner-all ui-widget-shadow"
},
content: function() { content: function() {
// support: IE<9, Opera in jQuery <1.7 // support: IE<9, Opera in jQuery <1.7
// .text() can't accept undefined, so coerce to a string // .text() can't accept undefined, so coerce to a string
@ -52,7 +55,6 @@ return $.widget( "ui.tooltip", {
collision: "flipfit flip" collision: "flipfit flip"
}, },
show: true, show: true,
tooltipClass: null,
track: false, track: false,
// callbacks // callbacks
@ -109,8 +111,8 @@ return $.widget( "ui.tooltip", {
"aria-live": "assertive", "aria-live": "assertive",
"aria-relevant": "additions" "aria-relevant": "additions"
}) })
.addClass( "ui-helper-hidden-accessible" )
.appendTo( this.document[ 0 ].body ); .appendTo( this.document[ 0 ].body );
this._addClass( this.liveRegion, null, "ui-helper-hidden-accessible" );
}, },
_setOption: function( key, value ) { _setOption: function( key, value ) {
@ -419,16 +421,12 @@ return $.widget( "ui.tooltip", {
}, },
_tooltip: function( element ) { _tooltip: function( element ) {
var tooltip = $( "<div>" ) var tooltip = $( "<div>" ).attr( "role", "tooltip" ),
.attr( "role", "tooltip" ) content = $( "<div>" ).appendTo( tooltip ),
// TODO move to classes option
.addClass( "ui-tooltip ui-widget ui-widget-shadow ui-corner-all ui-widget-content " +
( this.options.tooltipClass || "" ) ),
id = tooltip.uniqueId().attr( "id" ); id = tooltip.uniqueId().attr( "id" );
$( "<div>" ) this._addClass( content, "ui-tooltip-content" );
.addClass( "ui-tooltip-content" ) this._addClass( tooltip, "ui-tooltip", "ui-widget ui-widget-content" );
.appendTo( tooltip );
tooltip.appendTo( this.document[0].body ); 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;
})); }));