Permalink
Browse files

Tooltip: Add classes option

Ref #7053
Ref gh-1411
  • Loading branch information...
1 parent aaddfbf commit 9d71547394f9464e5af1f0c77e56917d0ba5abb6 @arschmitz arschmitz committed Dec 3, 2014
@@ -58,7 +58,9 @@
source: $.proxy( this, "_source" )
})
.tooltip({
- tooltipClass: "ui-state-highlight"
+ classes: {
+ "ui-tooltip": "ui-state-highlight"
+ }
});
this._on( this.input, {
@@ -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" ],
@@ -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
@@ -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
+ }
+});
@@ -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" );
@@ -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>
@@ -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 ) );
@@ -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,
@@ -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"
View
@@ -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;
+
}));

0 comments on commit 9d71547

Please sign in to comment.