jQuery插件多如牛毛，jQuery的高手也是随处可见，作为目前主流javascript框架，jQuery已经是无孔不入。咱也跟上时髦，做点特效，自己观赏观赏，并作为以后参考。高手有时间帮忙指导指导，先谢过。

一、写在前面的话：

jucelin也是初学者，写这么个小插件用了一个上午的时间，真是会者不难，难者不会。虽说Title提示类插件已经有很多高手写出来了，如张鑫旭的jQuery万能浮动框插件，功能很强大，但就是有些代码还看不懂，所以自己用最简单的方法，自己学习写了个。

再者工作中经常要用到使用表格来显示数据，但苦于界面宽度及页面美观的限制，一些内容只能显示部分，显示全部则用title来显示，可惜的是IE的一个怪毛病，鼠标放上去之后一段时间后显示，显示一段时间后就会消失，如果内容较多，使用者准备仔细阅读时，显示的title就消失了。鉴此需求，写个脚本，应该还算值，原本用在单页面的，在对jQuery插件的好奇心下，就封装成一个插件。

二、jQuery插件的基础知识

jQuery为开发插件提拱了两个方法，分别是jQuery自身类的拓展和给jQuery对象添加方法。

1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法

//插件定义
(function() {.extend({
		trim: function(obj) {
			return (obj + ' trim');
		}
	})
})(jQuery);

//调用
alert($.trim('aa'));

2.jQuery.fn.extend(object);给jQuery对象添加方法

//插件定义

(function() {.fn.alertWhileClick = function() {

(this).click(function (){

alert((this).val() + "2");

});

}

})(jQuery); //页面上为：<input id="input1" type="button" value="test"/>

//调用

$('#input1').alertWhileClick();

三、上代码

请直接访问这里：jQuery-tipsShow

四、插件使用方法

1.先引入jQuery，在引入jTipsShow

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery-tipsshow.js"></script>

2.调用插件

<script language="javascript">

(document).ready(function(){

//span-title，根据情况自己选择("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'span',

tipsTitle: 'title'

});

//span-rel，根据情况自己选择

("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'span',

tipsTitle: 'rel'

});

//td=title，根据情况自己选择("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'td',

tipsTitle: 'title'

});

});

</script>

3.初始化参数说明

titleValue: '',//title的默认值，这个基本上没什么用，初始化了也会被替换掉，添加在插件中主要是全局使用

tipsTag: 'span',//需要显示内容的容器

tipsTitle: 'title',//显示框中要显示的内容

delaytime:500//延时，特效用的

另外被查找的容器tipcontain会被定义成position:relative，所以需要注意样式。

五、总结下

原本参考着别人的插件写的，没有查看jQuery插件的基础知识，导致两种方法弄混了，怎么调试都出错，不会走，就想跑了，呵呵，惭愧下。这个插件还是可以继续拓展的，而且效率方面可能也不是最优的，因为我还没学习到这块的内容，以后再看看能不能优化，也希望你能停下脚步，帮俺看看。

下载插件JS：https://jucelin.com/wp-content/uploads/2012/01/jQuery-tipsShow1.js

在线演示文档：https://jucelin.com/wp-content/uploads/2012/01/jTipsShow.html

六、参考资料：

jQuery插件开发：http://www.zhuoda.org/irini/112855.html

jQuery插件开发全解析：http://www.iteye.com/topic/545971

jquery插件开发范例—A Plugin Development Pattern：http://www.iteye.com/topic/349020

更多参考资料请google：http://www.google.com