jquery-ui/ui/jquery.ui.tooltip.js

224 lines
5.3 KiB
JavaScript
Raw Normal View History

/*
* jQuery UI Tooltip @VERSION
*
2011-01-17 14:13:18 +00:00
* 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
*/
2011-05-28 00:05:20 +00:00
(function( $ ) {
var increments = 0;
2011-05-28 15:43:57 +00:00
$.widget( "ui.tooltip", {
version: "@VERSION",
options: {
content: function() {
return $( this ).attr( "title" );
},
hide: true,
2011-05-29 00:19:23 +00:00
items: "[title]",
position: {
my: "left+15 center",
at: "right center",
collision: "flip fit"
2011-05-29 00:19:23 +00:00
},
show: true,
tooltipClass: null,
// callbacks
close: null,
open: null
},
2011-05-28 00:05:20 +00:00
2010-10-26 12:41:14 +00:00
_create: function() {
2011-05-28 00:05:20 +00:00
this._bind({
mouseover: "open",
focusin: "open"
});
// IDs of generated tooltips, needed for destroy
this.tooltips = {};
},
2011-05-28 00:05:20 +00:00
_setOption: function( key, value ) {
if ( key === "disabled" ) {
this[ value ? "_disable" : "_enable" ]();
this.options[ key ] = value;
// disable element style changes
return;
}
this._super( "_setOption", key, value );
},
2011-05-28 00:05:20 +00:00
_disable: function() {
var that = this;
// close open tooltips
$.each( this.tooltips, function( id, element ) {
var event = $.Event( "blur" );
event.target = event.currentTarget = element[0];
that.close( event, true );
});
// remove title attributes to prevent native tooltips
this.element.find( this.options.items ).andSelf().each(function() {
var element = $( this );
if ( element.is( "[title]" ) ) {
element
.data( "tooltip-title", element.attr( "title" ) )
.attr( "title", "" );
}
});
},
_enable: function() {
// restore title attributes
this.element.find( this.options.items ).andSelf().each(function() {
var element = $( this );
if ( element.data( "tooltip-title" ) ) {
element.attr( "title", element.data( "tooltip-title" ) );
}
});
},
2011-05-28 00:05:20 +00:00
open: function( event ) {
2011-05-29 00:30:14 +00:00
var content,
that = this,
target = $( event ? event.target : this.element )
.closest( this.options.items );
// if aria-describedby exists, then the tooltip is already open
if ( !target.length || target.attr( "aria-describedby" ) ) {
return;
}
2011-05-28 00:05:20 +00:00
if ( !target.data( "tooltip-title" ) ) {
target.data( "tooltip-title", target.attr( "title" ) );
}
2011-05-29 00:30:14 +00:00
content = this.options.content.call( target[0], function( response ) {
2011-05-28 15:43:57 +00:00
// IE may instantly serve a cached response for ajax requests
// delay this call to _open so the other call to _open runs first
setTimeout(function() {
that._open( event, target, response );
2011-05-28 15:43:57 +00:00
}, 1 );
});
2011-05-28 00:05:20 +00:00
if ( content ) {
that._open( event, target, content );
}
},
2011-05-28 00:05:20 +00:00
_open: function( event, target, content ) {
2011-05-28 00:05:20 +00:00
if ( !content ) {
return;
2011-05-28 00:05:20 +00:00
}
// if we have a title, clear it to prevent the native tooltip
// we have to check first to avoid defining a title if none exists
// (we don't want to cause an element to start matching [title])
// TODO: document why we don't use .removeAttr()
if ( target.is( "[title]" ) ) {
target.attr( "title", "" );
}
// ajaxy tooltip can update an existing one
var tooltip = this._find( target );
2011-05-28 00:05:20 +00:00
if ( !tooltip.length ) {
tooltip = this._tooltip( target );
target.attr( "aria-describedby", tooltip.attr( "id" ) );
}
2011-05-28 00:05:20 +00:00
tooltip.find( ".ui-tooltip-content" ).html( content );
tooltip
.stop( true )
.position( $.extend({
of: target
}, this.options.position ) )
.hide();
this._show( tooltip, this.options.show );
this._trigger( "open", event, { tooltip: tooltip } );
this._bind( target, {
mouseleave: "close",
blur: "close",
keyup: function( event ) {
if ( event.keyCode == $.ui.keyCode.ESCAPE ) {
var fakeEvent = $.Event(event);
fakeEvent.currentTarget = target[0];
this.close( fakeEvent, true );
}
}
});
},
2011-05-28 00:05:20 +00:00
close: function( event, force ) {
var that = this,
2011-05-29 00:30:14 +00:00
target = $( event ? event.currentTarget : this.element ),
tooltip = this._find( target );
// don't close if the element has focus
// this prevents the tooltip from closing if you hover while focused
if ( !force && document.activeElement === target[0] ) {
return;
2011-05-28 00:05:20 +00:00
}
// only set title if we had one before (see comment in _open())
if ( target.data( "tooltip-title" ) ) {
target.attr( "title", target.data( "tooltip-title" ) );
}
target.removeAttr( "aria-describedby" );
2011-05-28 00:05:20 +00:00
tooltip.stop( true );
this._hide( tooltip, this.options.hide, function() {
$( this ).remove();
delete that.tooltips[ this.id ];
});
2011-05-28 00:05:20 +00:00
target.unbind( "mouseleave.tooltip blur.tooltip keyup.tooltip" );
2011-05-28 00:05:20 +00:00
this._trigger( "close", event, { tooltip: tooltip } );
},
_tooltip: function( element ) {
var id = "ui-tooltip-" + increments++,
tooltip = $( "<div>" )
2011-05-29 00:30:14 +00:00
.attr({
id: id,
role: "tooltip"
})
.addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content " +
( this.options.tooltipClass || "" ) );
2011-05-28 00:05:20 +00:00
$( "<div>" )
.addClass( "ui-tooltip-content" )
.appendTo( tooltip );
tooltip.appendTo( document.body );
2011-05-29 23:28:35 +00:00
if ( $.fn.bgiframe ) {
tooltip.bgiframe();
}
this.tooltips[ id ] = element;
return tooltip;
},
_find: function( target ) {
var id = target.attr( "aria-describedby" );
2011-05-28 15:43:57 +00:00
return id ? $( "#" + id ) : $();
},
_destroy: function() {
$.each( this.tooltips, function( id ) {
$( "#" + id ).remove();
});
}
});
2011-05-28 00:05:20 +00:00
}( jQuery ) );