Tooltip: Add classes option

Ref #7053 Ref gh-1411
jquery · 9d71547394f9464e5af1f0c77e56917d0ba5abb6 · arschmitz committed Dec 3, 2014 · Dec 3, 2014 · 9d71547
1 parent aaddfbf
commit 9d71547394f9464e5af1f0c77e56917d0ba5abb6
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
@@ -58,7 +58,9 @@
 						source: $.proxy( this, "_source" )
 					})
 					.tooltip({
-						tooltipClass: "ui-state-highlight"
+						classes: {
+							"ui-tooltip": "ui-state-highlight"
+						}
 					});
 
 				this._on( this.input, {
diff --git a/tests/unit/tooltip/tooltip.html b/tests/unit/tooltip/tooltip.html
@@ -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" ],
diff --git a/tests/unit/tooltip/tooltip_common.js b/tests/unit/tooltip/tooltip_common.js
@@ -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
diff --git a/tests/unit/tooltip/tooltip_common_deprecated.js b/tests/unit/tooltip/tooltip_common_deprecated.js
@@ -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
+	}
+});
diff --git a/tests/unit/tooltip/tooltip_core.js b/tests/unit/tooltip/tooltip_core.js
@@ -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" );
diff --git a/tests/unit/tooltip/tooltip_deprecated.html b/tests/unit/tooltip/tooltip_deprecated.html
@@ -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>
diff --git a/tests/unit/tooltip/tooltip_deprecated.js b/tests/unit/tooltip/tooltip_deprecated.js
@@ -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 ) );
diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js
@@ -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,
diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html
@@ -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"
diff --git a/ui/tooltip.js b/ui/tooltip.js
@@ -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;
+
 }));