').appendTo(document.body).data('showing', false);
$tip_content = $("#tipped_content");
});
$.fn.tipped = function(settings) {
this.each(function(i) {
$target = $(this); //shortcut
//store settings
settings = $.extend({}, defaults, settings);
$target.data('tipped', { settings: settings });
//make compatible with themeroller
if (settings.themeroller)
$tip.addClass('ui-helper-hidden ui-widget ui-dialog ui-corner-all');
else
$tip.removeClass('ui-helper-hidden ui-widget ui-dialog ui-corner-all');
//2 modes act differently
if (settings.mode == 'hover') {
var t = undefined;
$target
.mouseover(function(e) {
var $thisTarget = $(this);
$.fn.tipped.removeTitle($thisTarget);
t = setTimeout(function() { $.fn.tipped.initiateShow($thisTarget, e); }, settings.delay);
})
.mouseout(function() {
$.fn.tipped.hideTip($(this));
clearTimeout(t);
});
}
else if (settings.mode == 'click') {
$.fn.tipped.addCloser($target);
if (settings.themeroller) {
$("#tipped-closer")
.addClass('ui-button ui-state-hover ui-state-default')
.hover(function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); })
.mousedown(function() { $(this).addClass('ui-state-active'); })
.mouseup(function() { $(this).removeClass('ui-state-active'); })
}
else
$("#tipped-closer").removeClass('ui-button ui-state-hover ui-state-default');
$target.click(function() { $.fn.tipped.initiateShow($(this)); });
}
});
return this;
};
/**
* Function: addCloser()
* Purpose: To add a "close" element to the tooltip
* Parameters: $target: a jQuery object that has had a tip bound to it.
*/
$.fn.tipped.addCloser = function($target) {
//don't add if it's already there
if ($("#tipped-closer").length == 0) {
$tip.append('
' + $target.data('tipped').settings.closer + '');
$("#tipped-closer").click(function() { $.fn.tipped.hideTip($target); });
}
else
$("#tipped-closer-wrapper").show();
}
/**
* Function: removeTitle()
* Purpose: To remove the title attribute from the target, and store that value in data
* Parameters: $target: a jQuery object that has had a tip bound to it.
*/
$.fn.tipped.removeTitle = function($target) {
if ($target.data('tipped').title === undefined)
$target.data('tipped', $.extend($target.data('tipped'), { title: $target.attr('title') }));
//IE doesn't respect removal of the attribute, so need to set it to blank.
$target.removeAttr('title').attr('title', '');
}
/**
* Function: initiateShow()
* Purpose: To initiate the showing of a tip.
* Parameters: $target: a jQuery object that has had a tip bound to it. Tipped uses
* the settings associated with the $target to determine what to display
* e: The jQuery event that triggered the hover. Only provided if "position" is "mouse"
*/
$.fn.tipped.initiateShow = function($target, e) {
//shortcuts
var settings = $target.data('tipped').settings;
var cached = $tip.data('cached');
//manage the closer
if (settings.mode != 'click')
$("#tipped-closer-wrapper").hide();
else
$("#tipped-closer-wrapper").show();
//AJAX
if (settings.source === 'url') {
//if we're not caching, retrieve the value
if (!settings.cache || cached === undefined || cached[settings.url] === undefined) {
//set parameters
var data = {};
if (typeof settings.params == 'function')
data = settings.params($target);
else if (typeof settings.params == 'object')
data = settings.params;
$.ajax({
beforeSend: function() {
show($target, '
', e);
},
data: data,
error: function() {
show($target, 'Unable to retrieve contents', e);
},
success: function(display) {
if ($tip.data('showing'))
show($target, display, e);
//cache results if necessary
if (settings.cache) {
var newCache = new Object;
newCache[settings.url] = display;
cached = $.extend(cached, newCache);
$tip.data('cached', cached);
}
},
type: settings.ajaxType,
url: settings.url
});
return;
}
//otherwise, show the cached copy
else {
show($target, cached[settings.url], e);
return;
}
}
var value = '';
//'title' attribute
if (settings.source === 'title')
value = $target.data('tipped').title;
//any other string
else if (typeof settings.source == 'string')
value = settings.source;
//custom function
else if (typeof settings.source == 'function')
value = settings.source($target);
//jQuery object
else if (typeof settings.source == 'object')
value = settings.source.html();
show($target, value, e);
}
/*
* Function: hideTip()
* Purpose: To hide the tip
* Parameters: $target: a jQuery object representing the element that triggered the tip
*/
$.fn.tipped.hideTip = function($target) {
//$target.attr('title',$target.data('tipped').title);
$tip.data('showing', false).data('original', '').hide();
$tip_content.html('');
}
/*
* Function: getTrigger()
* Purpose: To provide access to the element that triggered the tip. Useful for
* clicked tips that need to know who triggered them
*
* Access with: $.getTrigger()
*/
$.extend({
getTrigger: function() {
return $tip.data('original');
}
});
/*
* Function: show()
* Purpose: To actually show the tip
* Parameters: $target: The element (wrapped in a jQuery object) that triggered the showing of this tip
* value: The HTML to place into the tip
*
* Note: This function is private
*/
function show($target, value, e) {
$tip_content.html(value);
setPosition($target, e)
$tip.data('showing', true).data('original', $target).show();
}
/*
* Function: setPosition()
* Purpose: To set the position of the tip. This function is called after the content of the tip
* is set, allowing the function to make a dynamic decision about the position of the tip
*
* The tip is always displayed fully on the screen & will be moved to ensure that.
* Parameters: $elem: a jQuery object representing the element relative to which the tip is to be positioned.
*
* Note: This function is private
*/
function setPosition($target) {
var settings = $target.data('tipped').settings;
//position tip in the top left corner, so full, proper width gets calculated
$tip.css({ left: 0, top: 0 });
resize($target, settings);
//determine element position on screen
var posX = 0;
var posY = 0;
switch (settings.position) {
case 'mouse':
posX = e.pageX + settings.marginX;
posY = e.pageY + settings.marginY;
break;
case 'absolute':
if (typeof settings.posX == 'function')
posX = settings.posX($target);
else
posX = settings.posX;
if (typeof settings.posY == 'function')
posY = settings.posY($target);
else
posY = settings.posY;
break;
default:
var targetPos = $target.offset();
posX = targetPos.left + $target.outerWidth() + settings.marginX;
posY = targetPos.top + $target.outerHeight() + settings.marginY;
break;
}
//adjust to ensure tip is inside viewable screen
var right = posX + $tip.outerWidth();
var bottom = posY + $tip.outerHeight();
var windowWidth = $(window).width() + $(window).scrollLeft() - 5;
var windowHeight = $(window).height() + $(window).scrollTop() - 5;
posX = (right > windowWidth) ? posX - (right - windowWidth) : posX;
posY = (bottom > windowHeight) ? posY - (bottom - windowHeight) : posY
$tip.css({ left: posX, top: posY });
}
function resize($target, settings) {
//reset height & width settings - may not be needed
$tip_content.css({ height: 'auto', width: 'auto' });
$tip.css({ height: 'auto', width: 'auto' });
if ($tip.outerHeight() > $(window).height()) {
if (settings.oversizeStick) {
$.fn.tipped.addCloser($elem);
$elem.unbind('mouseout');
}
var innerHeightDifference = $tip.outerHeight() - $tip_content.outerHeight();
var tipHeightDifference = $tip.outerHeight() - $tip.height();
//-10 to account for the -5 applied in setPosition
$tip.css('height', $(window).height() - tipHeightDifference - 10);
//+20 to account for the scrollbar. Browsers don't account for "auto" placed scrollbars in width calculations
//so the contents ends up getting squished
$tip_content.css({ height: $tip.outerHeight() - innerHeightDifference, overflow: "auto", width: $tip.outerWidth() + 20 });
}
if ($tip.outerWidth() > $(window).width()) {
if (settings.oversizeStick) {
$.fn.tipped.addCloser($elem);
$target.unbind('mouseout');
}
$tip_content.css({ width: $(window).width() - 20, overflow: "auto", height: $tip.outerWidth() + 20 });
}
}
})(jQuery);