diff options
Diffstat (limited to 'ui/jquery.ui.tooltip.js')
| -rw-r--r-- | ui/jquery.ui.tooltip.js | 118 |
1 files changed, 87 insertions, 31 deletions
diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 980b43868..e5b496bee 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -49,11 +49,12 @@ $.widget( "ui.tooltip", { return $( this ).attr( "title" ); }, hide: true, - items: "[title]", + // Disabled elements have inconsistent behavior across browsers (#8661) + items: "[title]:not([disabled])", position: { - my: "left+15 center", - at: "right center", - collision: "flipfit flipfit" + my: "left top+15", + at: "left bottom", + collision: "flipfit flip" }, show: true, tooltipClass: null, @@ -72,6 +73,12 @@ $.widget( "ui.tooltip", { // IDs of generated tooltips, needed for destroy this.tooltips = {}; + // IDs of parent tooltips where we removed the title attribute + this.parents = {}; + + if ( this.options.disabled ) { + this._disable(); + } }, _setOption: function( key, value ) { @@ -125,7 +132,10 @@ $.widget( "ui.tooltip", { }, open: function( event ) { - var target = $( event ? event.target : this.element ) + var that = this, + target = $( event ? event.target : this.element ) + // we need closest here due to mouseover bubbling, + // but always pointing at the same event target .closest( this.options.items ); // No element to show a tooltip for @@ -149,7 +159,28 @@ $.widget( "ui.tooltip", { target.data( "ui-tooltip-title", target.attr( "title" ) ); } - target.data( "tooltip-open", true ); + target.data( "ui-tooltip-open", true ); + + // kill parent tooltips, custom or native, for hover + if ( event && event.type === "mouseover" ) { + target.parents().each(function() { + var parent = $( this ), + blurEvent; + if ( parent.data( "ui-tooltip-open" ) ) { + blurEvent = $.Event( "blur" ); + blurEvent.target = blurEvent.currentTarget = this; + that.close( blurEvent, true ); + } + if ( parent.attr( "title" ) ) { + parent.uniqueId(); + that.parents[ this.id ] = { + element: this, + title: parent.attr( "title" ) + }; + parent.attr( "title", "" ); + } + }); + } this._updateContent( target, event ); }, @@ -165,7 +196,7 @@ $.widget( "ui.tooltip", { content = contentOption.call( target[0], function( response ) { // ignore async response if tooltip was closed already - if ( !target.data( "tooltip-open" ) ) { + if ( !target.data( "ui-tooltip-open" ) ) { return; } // IE may instantly serve a cached response for ajax requests @@ -180,7 +211,9 @@ $.widget( "ui.tooltip", { }, _open: function( event, target, content ) { - var tooltip, positionOption; + var tooltip, events, delayedShow, + positionOption = $.extend( {}, this.options.position ); + if ( !content ) { return; } @@ -214,10 +247,12 @@ $.widget( "ui.tooltip", { function position( event ) { positionOption.of = event; + if ( tooltip.is( ":hidden" ) ) { + return; + } tooltip.position( positionOption ); } - if ( this.options.track && event && /^mouse/.test( event.originalEvent.type ) ) { - positionOption = $.extend( {}, this.options.position ); + if ( this.options.track && event && /^mouse/.test( event.type ) ) { this._on( this.document, { mousemove: position }); @@ -232,23 +267,42 @@ $.widget( "ui.tooltip", { tooltip.hide(); this._show( tooltip, this.options.show ); + // Handle tracking tooltips that are shown with a delay (#8644). As soon + // as the tooltip is visible, position the tooltip using the most recent + // event. + if ( this.options.show && this.options.show.delay ) { + delayedShow = setInterval(function() { + if ( tooltip.is( ":visible" ) ) { + position( positionOption.of ); + clearInterval( delayedShow ); + } + }, $.fx.interval ); + } this._trigger( "open", event, { tooltip: tooltip } ); - this._on( target, { - mouseleave: "close", - focusout: "close", + events = { keyup: function( event ) { if ( event.keyCode === $.ui.keyCode.ESCAPE ) { var fakeEvent = $.Event(event); fakeEvent.currentTarget = target[0]; this.close( fakeEvent, true ); } + }, + remove: function() { + this._removeTooltip( tooltip ); } - }); + }; + if ( !event || event.type === "mouseover" ) { + events.mouseleave = "close"; + } + if ( !event || event.type === "focusin" ) { + events.focusout = "close"; + } + this._on( true, target, events ); }, - close: function( event, force ) { + close: function( event ) { var that = this, target = $( event ? event.currentTarget : this.element ), tooltip = this._find( target ); @@ -259,16 +313,6 @@ $.widget( "ui.tooltip", { return; } - // don't close if the element has focus - // this prevents the tooltip from closing if you hover while focused - // - // we have to check the event type because tabbing out of the document - // may leave the element as the activeElement - if ( !force && event && event.type !== "focusout" && - this.document[0].activeElement === target[0] ) { - return; - } - // only set title if we had one before (see comment in _open()) if ( target.data( "ui-tooltip-title" ) ) { target.attr( "title", target.data( "ui-tooltip-title" ) ); @@ -278,14 +322,24 @@ $.widget( "ui.tooltip", { tooltip.stop( true ); this._hide( tooltip, this.options.hide, function() { - $( this ).remove(); - delete that.tooltips[ this.id ]; + that._removeTooltip( $( this ) ); }); - target.removeData( "tooltip-open" ); + target.removeData( "ui-tooltip-open" ); this._off( target, "mouseleave focusout keyup" ); + // Remove 'remove' binding only on delegated targets + if ( target[0] !== this.element[0] ) { + this._off( target, "remove" ); + } this._off( this.document, "mousemove" ); + if ( event && event.type === "mouseleave" ) { + $.each( this.parents, function( id, parent ) { + $( parent.element ).attr( "title", parent.title ); + delete that.parents[ id ]; + }); + } + this.closing = true; this._trigger( "close", event, { tooltip: tooltip } ); this.closing = false; @@ -304,9 +358,6 @@ $.widget( "ui.tooltip", { .addClass( "ui-tooltip-content" ) .appendTo( tooltip ); tooltip.appendTo( this.document[0].body ); - if ( $.fn.bgiframe ) { - tooltip.bgiframe(); - } this.tooltips[ id ] = element; return tooltip; }, @@ -316,6 +367,11 @@ $.widget( "ui.tooltip", { return id ? $( "#" + id ) : $(); }, + _removeTooltip: function( tooltip ) { + tooltip.remove(); + delete this.tooltips[ tooltip.attr( "id" ) ]; + }, + _destroy: function() { var that = this; |