diff options
author | Alexander Schmitz <arschmitz@gmail.com> | 2014-12-03 11:30:22 -0500 |
---|---|---|
committer | Alexander Schmitz <arschmitz@gmail.com> | 2015-03-11 16:05:33 -0400 |
commit | 9d71547394f9464e5af1f0c77e56917d0ba5abb6 (patch) | |
tree | c26d5d586c47ecfdf40d07acb22cf30f8706a9e8 | |
parent | aaddfbfa8b3bdb0374540d7dd1e13a708bdb00aa (diff) | |
download | jquery-ui-9d71547394f9464e5af1f0c77e56917d0ba5abb6.tar.gz jquery-ui-9d71547394f9464e5af1f0c77e56917d0ba5abb6.zip |
Tooltip: Add classes option
Ref #7053
Ref gh-1411
-rw-r--r-- | demos/autocomplete/combobox.html | 4 | ||||
-rw-r--r-- | tests/unit/tooltip/tooltip.html | 4 | ||||
-rw-r--r-- | tests/unit/tooltip/tooltip_common.js | 5 | ||||
-rw-r--r-- | tests/unit/tooltip/tooltip_common_deprecated.js | 24 | ||||
-rw-r--r-- | tests/unit/tooltip/tooltip_core.js | 6 | ||||
-rw-r--r-- | tests/unit/tooltip/tooltip_deprecated.html | 53 | ||||
-rw-r--r-- | tests/unit/tooltip/tooltip_deprecated.js | 13 | ||||
-rw-r--r-- | tests/unit/tooltip/tooltip_options.js | 8 | ||||
-rw-r--r-- | tests/visual/tooltip/tooltip.html | 12 | ||||
-rw-r--r-- | ui/tooltip.js | 41 |
10 files changed, 142 insertions, 28 deletions
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 437e52ab1..f8898094d 100644 --- 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 18bd88c2c..1a7b94ae2 100644 --- 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 0611d724c..87e73f7ea 100644 --- 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 index 000000000..6ea0e65ff --- /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 4933be9ba..10ebb2829 100644 --- 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 index 000000000..813768337 --- /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 index 000000000..426f583ec --- /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 32f739544..1d9d6b3f0 100644 --- 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 8d5364d78..034021cd8 100644 --- 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 2c28cc073..5708015d9 100644 --- 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; + })); |