Tooltip: Add classes option

Ref #7053
Ref gh-1411

diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
index 437e52ab1d26ec7f973a289152c96c66ca86e527..f8898094dc8e9c48dfcfa4b572c213213238fd98 100644 (file)
--- 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
index 18bd88c2c98e8adce53ff78d4f78c5d5d7121708..1a7b94ae22cfb88b830c86d85d6973e3385ad17b 100644 (file)
--- 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
index 0611d724cecd3da20d7f8e4278d254e0d4b39bfd..87e73f7ea6c4acbf76a6502a3a0ed1dcd23c00c0 100644 (file)
--- 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
new file mode 100644 (file)
index 0000000..6ea0e65
--- /dev/null
+++ 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
index 4933be9ba8f88ccf472655140ef52c1507cc621c..10ebb2829bb4839d5969d58f385f9348b9843e17 100644 (file)
--- 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
new file mode 100644 (file)
index 0000000..8137683
--- /dev/null
+++ 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
new file mode 100644 (file)
index 0000000..426f583
--- /dev/null
+++ 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
index 32f7395446a559f7396fe9a1b4c245f3511044a8..1d9d6b3f09d5b0da99c9885ad305e3d3d206f46b 100644 (file)
--- 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
index 8d5364d783c8546ea18e58eec674d50aa9ae2705..034021cd8ecdbf035de95e9fa1c5394b8fd683cc 100644 (file)
--- 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
index 2c28cc073e0a72e8513047056a34dacbfdf50438..5708015d92bf3676aa5cea82ca59697fd96fb234 100644 (file)
--- 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;
+
 }));