', truncate: 60, ajaxSettings: { type: 'POST' }
* });
* @desc Displays a clueTip on mouseover of all ' + tipParts[i] + '
');
}
};
cluetipShow(pY);
}
/*******************************************************************************
* load external file via ajax
******************************************************************************/
else if (!opts.local && tipAttribute.indexOf('#') != 0) {
if (cluetipContents && opts.ajaxCache) {
$cluetipInner.html(cluetipContents);
cluetipShow(pY);
}
else {
var ajaxSettings = opts.ajaxSettings;
ajaxSettings.url = tipAttribute;
ajaxSettings.beforeSend = function() {
$cluetipOuter.children().empty();
if (opts.waitImage) {
$('#cluetip-waitimage')
.css({top: mouseY+20, left: mouseX+20})
.show();
}
};
ajaxSettings.error = function() {
if (isActive) {
$cluetipInner.html('sorry, the contents could not be loaded');
}
};
ajaxSettings.success = function(data) {
cluetipContents = opts.ajaxProcess(data);
if (isActive) {
$cluetipInner.html(cluetipContents);
}
};
ajaxSettings.complete = function() {
imgCount = $('#cluetip-inner img').length;
if (imgCount && !$.browser.opera) {
$('#cluetip-inner img').load(function() {
imgCount--;
if (imgCount<1) {
$('#cluetip-waitimage').hide();
if (isActive) cluetipShow(pY);
}
});
} else {
$('#cluetip-waitimage').hide();
if (isActive) cluetipShow(pY);
}
};
$.ajax(ajaxSettings);
}
/*******************************************************************************
* load an element from the same page
******************************************************************************/
} else if (opts.local){
var $localContent = $(tipAttribute + ':first');
var localCluetip = $.fn.wrapInner ? $localContent.wrapInner('').children().clone(true) : $localContent.html();
$.fn.wrapInner ? $cluetipInner.empty().append(localCluetip) : $cluetipInner.html(localCluetip);
cluetipShow(pY);
}
};
// get dimensions and options for cluetip and prepare it to be shown
var cluetipShow = function(bpY) {
$cluetip.addClass('cluetip-' + ctClass);
if (opts.truncate) {
var $truncloaded = $cluetipInner.text().slice(0,opts.truncate) + '...';
$cluetipInner.html($truncloaded);
}
function doNothing() {}; // empty function
tipTitle ? $cluetipTitle.show().html(tipTitle) : (opts.showTitle) ? $cluetipTitle.show().html(' ') : $cluetipTitle.hide();
if (opts.sticky) {
var $closeLink = $('');
(opts.closePosition == 'bottom') ? $closeLink.appendTo($cluetipInner) : (opts.closePosition == 'title') ? $closeLink.prependTo($cluetipTitle) : $closeLink.prependTo($cluetipInner);
$closeLink.click(function() {
cluetipClose();
return false;
});
if (opts.mouseOutClose) {
if ($.fn.hoverIntent && opts.hoverIntent) {
$cluetip.hoverIntent({
over: doNothing,
timeout: opts.hoverIntent.timeout,
out: function() { $closeLink.trigger('click'); }
});
} else {
$cluetip.hover(doNothing,
function() {$closeLink.trigger('click'); });
}
} else {
$cluetip.unbind('mouseout');
}
}
// now that content is loaded, finish the positioning
var direction = '';
$cluetipOuter.css({overflow: defHeight == 'auto' ? 'visible' : 'auto', height: defHeight});
tipHeight = defHeight == 'auto' ? Math.max($cluetip.outerHeight(),$cluetip.height()) : parseInt(defHeight,10);
tipY = posY;
baseline = sTop + wHeight;
if (opts.positionBy == 'fixed') {
tipY = posY - opts.dropShadowSteps + tOffset;
} else if ( (posX < mouseX && Math.max(posX, 0) + tipWidth > mouseX) || opts.positionBy == 'bottomTop') {
if (posY + tipHeight + tOffset > baseline && mouseY - sTop > tipHeight + tOffset) {
tipY = mouseY - tipHeight - tOffset;
direction = 'top';
} else {
tipY = mouseY + tOffset;
direction = 'bottom';
}
} else if ( posY + tipHeight + tOffset > baseline ) {
tipY = (tipHeight >= wHeight) ? sTop : baseline - tipHeight - tOffset;
} else if ($this.css('display') == 'block' || $this[0].tagName.toLowerCase() == 'area' || opts.positionBy == "mouse") {
tipY = bpY - tOffset;
} else {
tipY = posY - opts.dropShadowSteps;
}
if (direction == '') {
posX < linkLeft ? direction = 'left' : direction = 'right';
}
$cluetip.css({top: tipY + 'px'}).removeClass().addClass('clue-' + direction + '-' + ctClass).addClass(' cluetip-' + ctClass);
if (opts.arrows) { // set up arrow positioning to align with element
var bgY = (posY - tipY - opts.dropShadowSteps);
$cluetipArrows.css({top: (/(left|right)/.test(direction) && posX >=0 && bgY > 0) ? bgY + 'px' : /(left|right)/.test(direction) ? 0 : ''}).show();
} else {
$cluetipArrows.hide();
}
// (first hide, then) ***SHOW THE CLUETIP***
$dropShadow.hide();
$cluetip.hide()[opts.fx.open](opts.fx.open != 'show' && opts.fx.openSpeed);
if (opts.dropShadow) $dropShadow.css({height: tipHeight, width: tipInnerWidth}).show();
// if ($.fn.bgiframe) { $cluetip.bgiframe(); }
if ($.fn.bgiframe) { $cluetip.bgiframe(); $cluetipArrows.bgiframe();}
// trigger the optional onShow function
if (opts.delayedClose > 0) {
closeOnDelay = setTimeout(cluetipClose, opts.delayedClose);
}
opts.onShow($cluetip, $cluetipInner);
};
/*******************************************************************************
* =INACTIVATION --------------------------------------
*/
var inactivate = function() {
isActive = false;
$('#cluetip-waitimage').hide();
if (!opts.sticky || (/click|toggle/).test(opts.activation) ) {
cluetipClose();
clearTimeout(closeOnDelay);
};
if (opts.hoverClass) {
$this.removeClass(opts.hoverClass);
}
$('.cluetip-clicked').removeClass('cluetip-clicked');
};
// close cluetip and reset some things
var cluetipClose = function() {
$cluetipOuter
.parent().hide().removeClass().end()
.children().empty();
if (tipTitle) {
$this.attr(opts.titleAttribute, tipTitle);
}
$this.css('cursor',opts.cursor_bak);
if (opts.arrows) $cluetipArrows.css({top: ''});
};
/*******************************************************************************
* =BIND EVENTS --------------------------------------
*/
// for test
$this.bind("show", function(event) {
event.pageX = $this.attr("pageX");
event.pageY = $this.attr("pageY");
if($.browser.msie)
this.click();
else
activate(event);
});
$this.bind("hide", function(event) {
// inactivate(event);
if($.browser.msie)
this.click();
else
inactivate(event);
});
// activate by click
if ( (/click|toggle/).test(opts.activation) ) {
$this.click(function(event) {
if ($cluetip.is(':hidden') || !$this.is('.cluetip-clicked')) {
activate(event);
$('.cluetip-clicked').removeClass('cluetip-clicked');
$this.addClass('cluetip-clicked');
} else {
inactivate(event);
}
this.blur();
return false;
});
// activate by focus; inactivate by blur
} else if (opts.activation == 'focus') {
$this.focus(function(event) {
activate(event);
});
$this.blur(function(event) {
inactivate(event);
});
// activate by hover
// clicking is returned false if cluetip url is same as href url
} else {
$this.click(function() {
if ($this.attr('href') && $this.attr('href') == tipAttribute && !opts.clickThrough) {
return false;
}
});
// set up mouse tracking
var mouseTracks = function(evt) {
if (opts.tracking == true) {
var trackX = posX - evt.pageX;
var trackY = tipY ? tipY - evt.pageY : posY - evt.pageY;
$this.mousemove(function(evt) {
$cluetip.css({left: evt.pageX + trackX, top: evt.pageY + trackY });
});
}
};
if ($.fn.hoverIntent && opts.hoverIntent) {
$this.mouseover(function() {$this.attr('title',''); })
.hoverIntent({
sensitivity: opts.hoverIntent.sensitivity,
interval: opts.hoverIntent.interval,
over: function(event) {
activate(event);
mouseTracks(event);
},
timeout: opts.hoverIntent.timeout,
out: function(event) {inactivate(event); $this.unbind('mousemove');}
});
} else {
$this.hover(function(event) {
activate(event);
mouseTracks(event);
}, function(event) {
inactivate(event);
$this.unbind('mousemove');
});
}
}
});
};
/*
* options for clueTip
*
* each one can be explicitly overridden by changing its value. for example:
* $.fn.cluetip.defaults.width = 200; would change the default width for all
* clueTips to 200.
*
* each one can also be overridden by passing an options map to the cluetip
* method. for example: $('a.example').cluetip({width: 200}); would change the
* default width to 200 for clueTips invoked by a link with class of "example"
*
*/
$.fn.cluetip.defaults = { // set up default options
width: 275, // The width of the clueTip
height: 'auto', // The height of the clueTip
cluezIndex: 97, // Sets the z-index style property of the
// clueTip
positionBy: 'auto', // Sets the type of positioning: 'auto',
// 'mouse','bottomTop', 'fixed'
topOffset: 10, // Number of px to offset clueTip from top of
// invoking element
leftOffset: 10, // Number of px to offset clueTip from left of
// invoking element
local: false, // Whether to use content from the same page for
// the clueTip's body
hideLocal: true, // If local option is set to true, this
// determines whether local content
// to be shown in clueTip should be hidden at
// its original location
attribute: 'rel', // the attribute to be used for fetching the
// clueTip's body content
titleAttribute: 'title', // the attribute to be used for fetching the
// clueTip's title
splitTitle: '', // A character used to split the title attribute
// into the clueTip title and divs
// within the clueTip body. more info below [6]
showTitle: true, // show title bar of the clueTip, even if title
// attribute not set
cluetipClass: 'default',// class added to outermost clueTip div in the
// form of 'cluetip-' + clueTipClass.
hoverClass: '', // class applied to the invoking element
// onmouseover and removed onmouseout
waitImage: true, // whether to show a "loading" img, which is set
// in jquery.cluetip.css
cursor: 'help',
cursor_bak: '', // for cursor restore
arrows: false, // if true, displays arrow on appropriate side
// of clueTip
dropShadow: true, // set to false if you don't want the
// drop-shadow effect on the clueTip
dropShadowSteps: 6, // adjusts the size of the drop shadow
sticky: false, // keep visible until manually closed
mouseOutClose: false, // close when clueTip is moused out
activation: 'hover', // set to 'click' to force user to click to show
// clueTip
// set to 'focus' to show on focus of a form
// element and hide on blur
clickThrough: false, // if true, and activation is not 'click', then
// clicking on link will take user to the link's
// href,
// even if href and tipAttribute are equal
tracking: false, // if true, clueTip will track mouse movement
// (experimental)
delayedClose: 0, // close clueTip on a timed delay (experimental)
closePosition: 'top', // location of close text for sticky cluetips;
// can be 'top' or 'bottom' or 'title'
closeText: 'Close', // text (or HTML) to to be clicked to close
// sticky clueTips
truncate: 0, // number of characters to truncate clueTip's
// contents. if 0, no truncation occurs
// effect and speed for opening clueTips
fx: {
open: 'show', // can be 'show' or 'slideDown' or
// 'fadeIn'
openSpeed: ''
},
// settings for when hoverIntent plugin is used
hoverIntent: {
sensitivity: 3,
interval: 50,
timeout: 0
},
// function to run just before clueTip is shown.
onActivate: function(e) {return true;},
// function to run just after clueTip is shown.
onShow: function(ct, c){},
// whether to cache results of ajax request to avoid unnecessary hits to
// server
ajaxCache: true,
// process data retrieved via xhr before it's displayed
ajaxProcess: function(data) {
data = data.replace(/
':''
, cluetipClass: cluetipClass?cluetipClass:'default'
, dropShadow: cluetipClass=="rounded"?false:true
, arrows: arrows
, activation: activation?activation:'hover'
});
}
);
}
if(typeof tooltipObject == "undefined") var tooltipObject = new Object();
tooltipObject.makeTooltip = function(id,title,body_txt,url,width,sticky, positionBy, cluetipClass, arrows)
{
if ($("#"+id).length)
{
_tooltip_(id,title,body_txt,url,width,sticky, positionBy, cluetipClass, arrows, "");
return;
}
this.id = id;
var divString = "haha
"
$(divString).appendTo("body").hide();
//positionBy = "bottomTop";
sticky = false;
// activation: 'click'
_tooltip_(id,title,body_txt,url,width,sticky, positionBy, cluetipClass, arrows, "click");
}
tooltipObject.makeTooltip.prototype = {
show: function(x,y){
// for cross browser supporting... but not yet supported.. --;
x = typeof x != "undefined" ? x:10;
y = typeof y != "undefined" ? y:10;
$("#"+this.id).attr("pageX", x).attr("pageY", y);
$("#"+this.id).trigger("show");
},
hide: function(){
$("#"+this.id).trigger("hide");
}
}
var MakeTooltip = tooltipObject.makeTooltip;
function buttonTooltip(id,content)
{
MakeTooltip(id, "", content, "", "" ,false, "auto", "default", false);
}