JSP界面设置提示浮动框

1、公共js

<script type="text/javascript">
var tip={
    $:function(ele){
        if(typeof(ele)=="object")
            return ele;
        else if(typeof(ele)=="string"||typeof(ele)=="number")
            return document.getElementById(ele.toString());
        return null;
    },
    mousePos:function(e){
        var x,y;
        var e = e||window.event;
        return{ x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
                y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};
        },
    start:function(obj){
        var self = this;
        var t = self.$("mjs:tip");
        obj.onmousemove=function(e){
            var mouse = self.mousePos(e);
            t.style.left = mouse.x + 10 + 'px';
            t.style.top = mouse.y - 30 + 'px';
            t.innerHTML = obj.getAttribute("tips");
            if(t.innerHTML.trim() !=''){
                t.style.display = '';
            }
        };
        obj.onmouseout=function(){
            t.style.display = 'none';
        };
    }
}
</script>

2、公共css

.tip{
  width:auto;
  max-width:200px;
  border:2px solid #ddd;
  padding:4px;
  background:#f1f1f1;
  color:#666;
}

3、在公共页面引入

<div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div> 

4、在需要提示的页面任意标签加入onmouseover="tip.start(this)" tips="提示信息"

如：

<input onmouseover="tip.start(this)" tips="提示信息" type="button" class="inputbtn btn-prime radius" id="payCompen" value="确认"/>

<img src="../images/wenhao.png" onmouseover="tip.start(this)" tips="提示信息" />

5、效果