简单弄得表单提示功能

领导说：“一定要提高程序与用户交互效果，不要存在歧义字段。”

员工说：“那我们给表单中每个字段都加上提示信息吧，用白话文解释特有名词。”

领导说：“好的，就这么干吧！”

于是，就有了下面的成果。首先说明一下实现的基本原理，使用onmouseout方法判断用户鼠标放在哪个元素上，然后给定义一个方法，执行显示提示信息框。核心思想就是当鼠标放置元素上显示提示框。为了考虑兼容问题也下了很多工夫。

我知道bootstrap也有现成的提示工具Tooltip，也希望此功能可以慢慢优化做成功能完善的插件。

代码很简单，直接上代码了，有什么不足还望多多请教。

css代码：

/**提示框样式*/ 
.tips_box{
    font-size:12px;color: black;padding:5px;text-align:left;
     position:absolute;line-height:16px;background-color:#FFFFE6;
     width:600;height:16;border:1px solid orange;display:none;
     filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3); 
     left:0; top:5
}
.tips_message{
    margin:5px;
    padding-top:2px;
    padding-bottom:2px;
}    

js代码：

/**
 *自己封装的信息提示工具 by ytd
 * 基于jquery
 * 使用方式：onmousemove="mytips.createMyTips(this,300)" onmouseout="mytips.hideTips()"
*/
var mytips = {
    defaultConfig: {
        width: 320,
        height: 'auto',
        left: 0,
        top: 0,
        display: 'none',
    },
    html : '<div class="tips_box">' +
    '<div class="tips_message"></div>' +
    '</div>',
    createMyTips : function(obj,tipWidth,tipHeight){
        //兼容写法
        var event = this.getEvent();
        var tips = $(obj).data("tips");//tips--提示信息
        var required = $(obj).data("valid");//required-- validate如果有 required 则是必填项
        var maxLength = $(obj).attr("maxlength");//maxLength--输入长度限制
        //判断validate 中是否有 "required"
        var isrequired = false;
        if (required){
            var _required = required.indexOf('required');
            if (_required > -1)    {
                isrequired = true;
            }
        }else{
            isrequired = false;
        }
        
        if(isrequired || maxLength){
            tips = tips + '<br>';
        }
        if(isrequired){
           tips = tips + '<font color="red"><b>*</b>&nbsp必填项</font>&nbsp';
        }
        if(maxLength){
           tips = tips + '<font color="red">长度限制：' + maxLength + '字节(一个汉字等于2个字节)</font>&nbsp';
        }
        //显示提示框
        this.showTips(tips,{
            width : tipWidth,//tipWidth--提示图层宽度
            height : tipHeight,//tipHeight--提示图层高度
            left : event.clientX+this.getScreenXY().left+10,
            top : event.clientY+this.getScreenXY().top+10,
        });
        
    },
    showTips : function(tips,o){//显示提示
        var opts = {}, that = this;
        $.extend(opts, that.defaultConfig, o);//拷贝参数配置
        var id = new Date().getTime();
        //不重复添加
        $('body').append(that.html);
        var box = $('.tips_box');
        box.attr('data-id',id);
        box.css({
            'width': opts.width + 'px',
            'min-height': opts.height + 'px',
            'left':opts.left + 'px',
            'top':opts.top + 'px',
            'display':'block',
        });
        tips && $('.tips_message').html(tips).show();
    },
    hideTips : function(){
        var box = $('.tips_box');
        box.css({
            'display':'none',
        });
        box.remove();
    },
    getEvent : function (event){
        if (window.event) {
        return window.event;
        }
        var func = arguments.callee.caller;
        do{
            var eve=func.arguments[0];
            if(eve&&(eve.constructor==event||eve.constructor==MouseEvent||eve.constructor==KeyboardEvent)){
                return eve;
            }
        }while(func=func.caller)
    },
    getScreenXY : function(){
        var x=0,y=0;
        
        if (document.body && document.body.scrollTop && document.body.scrollLeft){
            y=document.body.scrollTop;
            x=document.body.scrollleft;    
        }
        if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft){
            y=document.documentElement.scrollTop;
            x=document.documentElement.scrollLeft;
        }
        return {left:x,top:y}
    },
    
};

html中使用方法：

   <label>姓名</label>
    <input type="text" name="fgfg" data-tips="请填写用户姓名" data-valid="required" maxlength="10" 
    οnmοusemοve="mytips.createMyTips(this,300)" οnmοuseοut="mytips.hideTips()">

 

效果图：