From 9d71547394f9464e5af1f0c77e56917d0ba5abb6 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:30:22 -0500 Subject: [PATCH] Tooltip: Add classes option Ref #7053 Ref gh-1411 --- demos/autocomplete/combobox.html | 4 +- tests/unit/tooltip/tooltip.html | 4 ++ tests/unit/tooltip/tooltip_common.js | 5 +- .../unit/tooltip/tooltip_common_deprecated.js | 24 +++++++++ tests/unit/tooltip/tooltip_core.js | 6 +-- tests/unit/tooltip/tooltip_deprecated.html | 53 +++++++++++++++++++ tests/unit/tooltip/tooltip_deprecated.js | 13 +++++ tests/unit/tooltip/tooltip_options.js | 8 --- tests/visual/tooltip/tooltip.html | 12 +++-- ui/tooltip.js | 41 ++++++++++---- 10 files changed, 142 insertions(+), 28 deletions(-) create mode 100644 tests/unit/tooltip/tooltip_common_deprecated.js create mode 100644 tests/unit/tooltip/tooltip_deprecated.html create mode 100644 tests/unit/tooltip/tooltip_deprecated.js 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 @@ jQuery UI Tooltip Test Suite + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ anchor + + aria-describedby + span + baz +
+ +
+ +
+ +
+ + 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 = $( "
" ) - .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 = $( "
" ).attr( "role", "tooltip" ), + content = $( "
" ).appendTo( tooltip ), id = tooltip.uniqueId().attr( "id" ); - $( "
" ) - .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; + }));