制作jQuery文字提示插件

(functions($){

$.fn.colorTip=function(settings){
var defaultSettings={
color:'yellow',
timeout:500
}
var supportedColor=['red','green','blue','white','yellow','black'];
settings=$.extend(defaultSettings);
return this.each(function(){
var elem=$(this);
if(!elem.attr('title')) return true;
var scheduleEvent=new eventScheduler();
var tip=new Tip(elem.attr('title'));
elem.append(tip.generate()).addClass('colorTipContainer');
var hasClass=false;
for(var i=0;i<supportedColors.length;i++){
if(elem.hasClass(supportedColor[i])){
hasClass=true;
break;
}
}
if(!hasClass){
elem.addClass(settings.color);
}
elem.hover(function(){
tip.show();
scheduleEvent.clear();
},function(){
scheduleEvent.set(function(){
tip.hide();
},settings.timeout);
});
elem.removeAttr('title');
});
}
function eventScheduler(){}
eventScheduler.prototype={
set:function(func,timeout){
this.timer=setTimeout(func,timeout);
},
clear:function(){
clearTimeout(this.timer);
}
}
function Tip(txt){
this.content=txt;
this.shown=false;
}
Tip.prototype={
generate:function(){
return this.tip||(this.tip=$('span class="colorTip">'+this.content+'<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
},
show:function(){
if(this.shown) return;
this.tip.css('margin-left',-this.tip.outerWidth()/2.fadeIn('fast'));
this.shown=true;
},
hide:function(){
this.tip.fadeOut();
this.shown=false;
}
}
})(jQuery);

$(function(){
$('[title]').colorTip({color:'yellow'});
})

 

html

<li><a href="#" title="提示内容">标题
<span class="colorTip" style="margin-left:-60px;">提示内容
<span class="pointyTipShadow"></span>
<span class="pointyTip"></span>
</span>
</a></li>