鼠标悬停提示数据

HTML

<h2>在单元行上移动鼠标看看效果</h2>
<table id='tooltip'>
    <tr data-tooltip="第1行提示">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr data-tooltip="第2行提示">
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<div id='tooltipMsg'>我是提示信息</div>
					    

JS

    window.onload = function(){
        var
        setCss = function(_this, cssOption){//设置元素样式
            //判断节点
            if ( !_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style ) {
                return;
            }
            for(var cs in cssOption){
                _this.style[cs] = cssOption[cs];
            }
            return _this;
        },

        _mousepos = {//鼠标在页面上的位置
            "top":0,
            "left":0
        },

        /**
         * 获取鼠标在页面上的位置
         * _e		触发的事件
         * left:鼠标在页面上的横向位置, top:鼠标在页面上的纵向位置
         */
        getMousePoint = function (_e) {
            var _body = document.body,
                    _left = 0,
                    _top = 0
                    ;
            //浏览器支持 pageYOffset, 那么可以使用pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
            if(typeof window.pageYOffset != 'undefined') {
                _left = window.pageXOffset;
                _top = window.pageYOffset;
            }
            //如果浏览器指定了DOCTYPE并且支持compatMode
            else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
                _left = document.documentElement.scrollLeft;
                _top = document.documentElement.scrollTop;
            }
            //其他的如果浏览器支持document.body
            else if(typeof _body != 'undefined') {
                _left = _body.scrollLeft;
                _top = _body.scrollTop;
            }

            _left += _e.clientX;
            _top += _e.clientY;

            _mousepos.left = _left;
            _mousepos.top = _top;

            return _mousepos;
        },

        //参数---e被绑定的节点；tooltipMsg显示信息的节点
        tooltip = function(e, tooltipMsg){
            var trE = e.rows,//获取被遍历的tr节点对象
                    trLen = trE.length,//获取被遍历的节点长度
                    i = 0;

            for(; i < trLen ; i++){//遍历被提示的对象
                var trEi = trE[i],
                        dataTooltip = trEi.getAttribute("data-tooltip");//获取数据

                if(dataTooltip){//如果存在 data-tooltip 数据则绑定响应的事件
                    trEi.onmousemove = function(event){//显示提示信息
                        event = event || _W.event;
                        var _pos = getMousePoint(event);
                        tooltipMsg.innerHTML = this.getAttribute("data-tooltip");//修正提示信息的坐标
                        setCss(tooltipMsg,{
                            "left":_pos.left + "px",
                            "top": (_pos.top+18) + "px",
                            //显示信息
                            "display":"inline"
                        })
                    }

                    trEi.onmouseout = function(){//隐藏提示信息
                        setCss(tooltipMsg,{//隐藏信息
                            "display":"none"
                        })
                    }
                }

            }

        };
        tooltip(document.getElementById("tooltip"), document.getElementById("tooltipMsg"));