jQuery简单实现title提示效果示例
本文实例讲述了jQuery简单实现title提示效果的方法。分享给大家供大家参考，具体如下：
/*
调用示例：
$(document).ready(function(){
$('.quicktip').quberTip({
speed:200
});
});
<ahref=''class='quicktip'title='Informationaboutthislink'>desktoppublishing</a>
*/
jQuery.fn.quberTip=function(options){
vardefaults={
speed:500,
xOffset:10,
yOffset:10
};
varoptions=$.extend(defaults,options);
returnthis.each(function(){
var$this=jQuery(this);
if($this.attr('title')!=undefined){
//PassthetitletoavariableandthenremoveitfromDOM
if($this.attr('title')!=''){
vartipTitle=($this.attr('title'));
}else{
vartipTitle='QuberTip';
}
//Removetitleattribute
$this.removeAttr('title');
$(this).hover(function(e){
//$(this).css('cursor','pointer');
$("body").append("<divid='tooltip'>"+tipTitle+"</div>");
$("#tooltip").css({"position":"absolute",
"z-index":"9999",
"background":"#D3DDF5",
"background-image":"url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)",
"padding":"5px",
"opacity":"0.9",
"border":"1pxsolid#A3C0E8",
"-moz-border-radius":"3px",
"border-radius":"3px",
"-webkit-border-radius":"3px",
"font-weight":"normal",
"font-size":"12px",
"display":"none"
});
$("#tooltip")
.css("top",(e.pageY+defaults.xOffset)+"px")
.css("left",(e.pageX+defaults.yOffset)+"px")
.fadeIn(options.speed);
},function(){
//RemovethetooltipfromtheDOM
$("#tooltip").remove();
});
$(this).mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY+defaults.xOffset)+"px")
.css("left",(e.pageX+defaults.yOffset)+"px");
});
}
});
};
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQueryform操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。