引用
项目中需要一个信息提示的功能，就上网找了一个插件，发现colortip实现比较简单，就定了这个插件。
实现过程
官网：http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/
最终要实现的效果：
colortip是将标签中的title属性的值弹出显示的，默认情况是黄色的：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <!--css文件--> 7 <link href="Colortip/styles.css" rel="stylesheet" /> 8 <link href="Colortip/colortip-1.0/colortip-1.0-jquery.css" rel="stylesheet" /> 9 </head> 10 <body> 11 <div style="text-align:center;margin-top:200px;"><a href="#" title="这是个大美女">美女</a></div> 12 <div style="text-align:center;margin-top:250px;"><a href="#" title="这是个大美女" class="black">美女</a></div> 13 </body> 14 </html> 15 <!--引入需要的js--> 16 <script type="text/javascript" src="Script/jquery-1.11.0.js"></script> 17 <script type="text/javascript" src="Colortip/colortip-1.0/colortip-1.0-jquery.js"></script> 18 <script type="text/javascript" src="Colortip/script.js"></script>
效果：
通过查看这些设置，是在colortip-1.0-jquery.js文件中进行配置的：
(function($){ $.fn.colorTip = function(settings){ var defaultSettings = { color : 'yellow',//默认颜色 timeout : 500 } var supportedColors = ['red','green','blue','white','yellow','black'];//总共有6种主题的颜色 /* Combining the default settings object with the supplied one */ settings = $.extend(defaultSettings,settings); /* * Looping through all the elements and returning them afterwards. * This will add chainability to the plugin. */ return this.each(function(){ var elem = $(this); // If the title attribute is empty, continue with the next element if(!elem.attr('title')) return true; // Creating new eventScheduler and Tip objects for this element. // (See the class definition at the bottom). var scheduleEvent = new eventScheduler(); var tip = new Tip(elem.attr('title')); // Adding the tooltip markup to the element and // applying a special class: elem.append(tip.generate()).addClass('colorTipContainer'); // Checking to see whether a supported color has been // set as a classname on the element. var hasClass = false; for(var i=0;i<supportedColors.length;i++) { if(elem.hasClass(supportedColors[i])){ hasClass = true; break; } } // If it has been set, it will override the default color if(!hasClass){ elem.addClass(settings.color); } // On mouseenter, show the tip, on mouseleave set the // tip to be hidden in half a second. elem.hover(function(){ tip.show(); // If the user moves away and hovers over the tip again, // clear the previously set event: scheduleEvent.clear(); },function(){ // Schedule event actualy sets a timeout (as you can // see from the class definition below). scheduleEvent.set(function(){ tip.hide(); },settings.timeout); }); // Removing the title attribute, so the regular OS titles are // not shown along with the tooltips. elem.removeAttr('title'); }); } /* / Event Scheduler Class Definition */ function eventScheduler(){} eventScheduler.prototype = { set : function (func,timeout){ // The set method takes a function and a time period (ms) as // parameters, and sets a timeout this.timer = setTimeout(func,timeout); }, clear: function(){ // The clear method clears the timeout clearTimeout(this.timer); } } /* / Tip Class Definition */ function Tip(txt){ this.content = txt; this.shown = false; } Tip.prototype = { generate: function(){ // The generate method returns either a previously generated element // stored in the tip variable, or generates it and saves it in tip for // later use, after which returns it. return this.tip || (this.tip = $('<span class="colorTip">'+this.content+ '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));//显示的消息提示框是一个span标签 }, show: function(){ if(this.shown) return; // Center the tip and start a fadeIn animation this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast'); this.shown = true; }, hide: function(){ this.tip.fadeOut(); this.shown = false; } } })(jQuery);
通过该js文件，可见该插件主要是在title属性中设置显示信息的。
总结
colortip用起来还是非常简单的，在想要提示信息的地方加个带title属性的a标签就可以了，不过有点差强人意的地方，如果其他的标签例如按钮，加一个title，就会提示错误。