(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>