先看下效果：
html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="../js/jquery.js"></script><script type="text/javascript" src="./js/tip.jquery.js"></script><title>jquery tip提示</title></head><body><input type="text" id="username" placeholder="请输入邮箱或手机号" /></body></html>
js调用：
<script type="text/javascript"><!--$('#username').blur(function() {/*$(this).tip({message:'请输入邮箱或手机号', //需要显示的内容position:'bottom center',//提示框显示位置和箭头位置//left:提示框位于触发元素的位置 默认bottom （值有4个，left,top,bottom,right） //center:箭头位于提示框的位置默认center 其他值 为具体像素 （如 10px px为必须）color:'#999', //提示文字的颜色 默认#999bgColor:'#fffce7', //提示框背景颜色 默认#fffce7bdColor:'#f8cc7e', //提示框边框颜色 默认#f8cc7ehideEvent:'click focus', //提示框消失事件 默认click focus （多个事件空格分开，支持的事件参考jQuery bind函数）fontSize:'12px',//提示文字大小默认12pxhideTime:0,//提示框消失过度时间 默认0top:0,//提示框位置top偏移量 默认0left:0//提示框位置left偏移量 默认0});*///简洁的调用方式$(this).tip('请输入邮箱或手机号');});//--></script>
tip.jquery.js
(function($) {$.fn.tip=(function(options) {var _this = $(this);var _param = {message:'',position:'bottom center',color:'#999',bgColor:'#fffce7',bdColor:'#f8cc7e',hideEvent:'focus',fontSize:'12px',hideTime:0,top:0,left:0};$.extend(_param,options);if(typeof(options) != 'object') _param.message = options;if(!_param.message) return false;var _box = $('<div></div>').css({'color':_param.color,'background':_param.bgColor,border:'1px solid '+_param.bdColor,'position':'absolute','padding':'5px 10px','font-size':_param.fontSize}).html('<div id="tip_message">'+_param.message+'</div>').appendTo($('body'));var _point = $('<div>◆</div>').css({width:16,height:16,'position':'absolute','color':_param.bdColor,'font-size':'14px','line-height':'14px'}).appendTo(_box);var _point_shade = _point.clone().css('color',_param.bgColor).appendTo(_box);var _position = _param.position.split(' ');_position[1] = _position[1] ? _position[1] : 'center';var _top,_left;switch (_position[0]) {case 'bottom':_top = -7;_left = (_position[1]=='center') ? (_box.outerWidth()-16)/2 : _position[1];_point.css({top:_top,left:_left}); _point_shade.css({top:_top+1,left:_left});_box.css({top:_this.offset().top+_this.outerHeight()+8+_param.top,left:_this.offset().left+_param.left});break;case 'top':_top = _box.outerHeight()-7;_left = (_position[1]=='center') ? (_box.outerWidth()-16)/2 : _position[1];_point.css({top:_top,left:_left}); _point_shade.css({top:_top-1,left:_left});_box.css({top:_this.offset().top-_box.outerHeight()-8+_param.top,left:_this.offset().left+_param.left});break;case 'left':_top = (_position[1]=='center') ? (_box.outerHeight()-16)/2 : _position[1];_left = _box.outerWidth()-8;_point.css({top:_top,left:_left}); _point_shade.css({top:_top,left:_left-1});_box.css({top:_this.offset().top,left:_this.offset().left-_box.outerWidth()-8});break;case 'right':_top = (_position[1]=='center') ? (_box.outerHeight()-16)/2 : _position[1];_left = -7;_point.css({top:_top,left:_left}); _point_shade.css({top:_top,left:_left+1});_box.css({top:_this.offset().top,left:_this.offset().left+_this.outerWidth()+8});break;default:_top = -7;_left = (_position[1]=='center') ? (_box.outerWidth()-16)/2 : _position[1];_point.css({top:_top,left:_left}); _point_shade.css({top:_top+1,left:_left});_box.css({top:_this.offset().top+_this.outerHeight()+8+_param.top,left:_this.offset().left+_param.left});break;}_this.bind(_param.hideEvent,function(){_box.hide(_param.hideTime,function(){$(this).remove();});});});})(jQuery);
需要先加载jquery库
随便写的，代码不怎么严谨，本来想着写个加载css的函数，可以自定义样式，没时间，就这样了！^_^
