mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
147 lines
3.4 KiB
JavaScript
147 lines
3.4 KiB
JavaScript
/*
|
|
* jQuery UI Tooltip @VERSION
|
|
*
|
|
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
* http://jquery.org/license
|
|
*
|
|
* http://docs.jquery.com/UI/Tooltip
|
|
*
|
|
* Depends:
|
|
* jquery.ui.core.js
|
|
* jquery.ui.widget.js
|
|
* jquery.ui.position.js
|
|
*/
|
|
(function($) {
|
|
|
|
var increments = 0;
|
|
|
|
$.widget("ui.tooltip", {
|
|
options: {
|
|
tooltipClass: null,
|
|
items: "[title]",
|
|
content: function() {
|
|
return $( this ).attr( "title" );
|
|
},
|
|
position: {
|
|
my: "left+15 center",
|
|
at: "right center"
|
|
}
|
|
},
|
|
_create: function() {
|
|
this._bind( {
|
|
mouseover: "open",
|
|
focusin: "open"
|
|
});
|
|
},
|
|
|
|
enable: function() {
|
|
this.options.disabled = false;
|
|
},
|
|
|
|
disable: function() {
|
|
// only set option, disable element style changes
|
|
this.options.disabled = true;
|
|
},
|
|
|
|
open: function(event) {
|
|
var target = $(event && event.target || this.element).closest(this.options.items);
|
|
if ( !target.length ) {
|
|
return;
|
|
}
|
|
var self = this;
|
|
if ( !target.data("tooltip-title") ) {
|
|
target.data("tooltip-title", target.attr("title"));
|
|
}
|
|
var content = this.options.content.call(target[0], function(response) {
|
|
// IE may instantly serve a cached response, need to give it a chance to finish with _open before that
|
|
setTimeout(function() {
|
|
// when undefined, it got removeAttr, then ignore (ajax response)
|
|
// intially its an empty string, so not undefined
|
|
// TODO is there a better approach to enable ajax tooltips to have two updates?
|
|
if (target.attr( "aria-describedby" ) !== undefined) {
|
|
self._open(event, target, response);
|
|
}
|
|
}, 13);
|
|
});
|
|
if (content) {
|
|
self._open(event, target, content);
|
|
}
|
|
},
|
|
|
|
_open: function( event, target, content ) {
|
|
if ( !content )
|
|
return;
|
|
|
|
target.attr("title", "");
|
|
|
|
if ( this.options.disabled )
|
|
return;
|
|
|
|
// ajaxy tooltip can update an existing one
|
|
var tooltip = this._find( target );
|
|
if (!tooltip.length) {
|
|
tooltip = this._tooltip();
|
|
target.attr( "aria-describedby", tooltip.attr( "id" ) );
|
|
}
|
|
tooltip.find(".ui-tooltip-content").html( content );
|
|
tooltip.position( $.extend({
|
|
of: target
|
|
}, this.options.position ) ).hide();
|
|
|
|
tooltip.stop( true );
|
|
this._show( tooltip, this.options.show );
|
|
|
|
this._trigger( "open", event );
|
|
|
|
this._bind( target, {
|
|
mouseleave: "close",
|
|
blur: "close",
|
|
click: "close"
|
|
});
|
|
},
|
|
|
|
close: function( event ) {
|
|
var target = $( event && event.currentTarget || this.element );
|
|
target.attr( "title", target.data( "tooltip-title" ) );
|
|
|
|
if ( this.options.disabled )
|
|
return;
|
|
|
|
var tooltip = this._find( target );
|
|
target.removeAttr( "aria-describedby" );
|
|
|
|
tooltip.stop( true );
|
|
this._hide( tooltip, this.options.hide, function() {
|
|
$( this ).remove();
|
|
});
|
|
|
|
target.unbind( "mouseleave.tooltip blur.tooltip" );
|
|
|
|
this._trigger( "close", event );
|
|
},
|
|
|
|
_tooltip: function() {
|
|
var tooltip = $( "<div></div>" )
|
|
.attr( "id", "ui-tooltip-" + increments++ )
|
|
.attr( "role", "tooltip" )
|
|
.addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content" );
|
|
if (this.options.tooltipClass) {
|
|
tooltip.addClass(this.options.tooltipClass);
|
|
}
|
|
$( "<div></div>" )
|
|
.addClass( "ui-tooltip-content" )
|
|
.appendTo( tooltip );
|
|
tooltip.appendTo( document.body );
|
|
return tooltip;
|
|
},
|
|
|
|
_find: function( target ) {
|
|
var id = target.attr( "aria-describedby" );
|
|
return id ? $( document.getElementById( id ) ) : $();
|
|
}
|
|
});
|
|
|
|
$.ui.tooltip.version = "@VERSION";
|
|
|
|
})(jQuery); |