JS实现tooltip的封装

　　Tooltip就是将鼠标停留某页面元素上，出现该元素的提示信息。一般应用中，我们指定title的值即可实现，当然他在一定时间后会消失。如果不让他消失，或者要显示一些有特别样式的提示信息，就要自己定义层来实现这样的tooltip，所以Tooltip的实现就是在元素的指定位置显示这样的层。首先贴上code~

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>tooltip</title>    
    <script type="text/javascript">
        var Common = {
            getItself: function(id) {
                return "string" == typeof id ? document.getElementById(id) : id;
            },
            getEvent: function() {//ie/ff
                if (document.all) {
                    return window.event;
                }
                func = getEvent.caller;
                while (func != null) {
                    var arg0 = func.arguments[0];
                    if (arg0) {
                        if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
                            return arg0;
                        }
                    }
                    func = func.caller;
                }
                return null;
            },
            getMousePos: function(ev) {
                if (!ev) {
                    ev = this.getEvent();
                }
                if (ev.pageX || ev.pageY) {
                    return {
                        x: ev.pageX,
                        y: ev.pageY
                    };
                }

                if (document.documentElement 00;">&& document.documentElement.scrollTop) {
                    return {
                        x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
                        y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
                    };
                }
                else if (document.body) {
                    return {
                        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                        y: ev.clientY + document.body.scrollTop - document.body.clientTop
                    };
                }
            },
            getElementPos: function(el) {
                el = this.getItself(el);
                var _x = 0, _y = 0;
                do {
                    _x += el.offsetLeft;
                    _y += el.offsetTop;
                } while (el = el.offsetParent);
                return { x: _x, y: _y };
            },
            getTextSize: function(text) {
                var span = document.createElement("span");
                var result = {};
                result.width = span.offsetWidth;
                result.height = span.offsetWidth;
                span.style.visibility = "hidden";
                document.body.appendChild(span);
                if (typeof span.textContent != "undefined")
                    span.textContent = text;
                else span.innerText = text;
                result.width = span.offsetWidth - result.width;
                result.height = span.offsetHeight - result.height;
                span.parentNode.removeChild(span);
                return result;
            }
        }
        //-----------------------------------------------------------------------------------------------------------
        var ToolTip = {
            showToolTip: function(param, linkObj, e) {
                var ev = e || window.event;
                var mosPos = Common.getMousePos(ev);
                var elPos = Common.getElementPos(linkObj);
                var upMouseLeft = 8, downMouseLeft = 13; //div水平方向在上面/下面偏移鼠标位置
                var div;
                if (document.getElementById("toolTipDiv")) {
                    document.body.removeChild(document.getElementById("toolTipDiv"));
                }
                div = document.createElement("div");
                div.id = "toolTipDiv";
                div.style.cssText = "position:absolute;border:solid 1px black;display:none;background-color:White;";
                div.innerHTML = linkObj.tip;
                document.body.appendChild(div);
                if (param && param.width) {//如未设置，默认一行显示
                    if (Common.getTextSize(div.innerHTML).width < param.width) {
                        div.style.maxWidth = param.width + "px";
                    } else {
                        div.style.width = param.width + "px";
                    }

                }

                div.style.display = ""; //must before set opr to get offsetHeight...
                ///set tooltip position
                if (elPos.y - div.offsetHeight < document.documentElement.scrollTop) {
                    div.style.top = elPos.y + linkObj.offsetHeight + "px";
                    if (mosPos.x + div.offsetWidth + document.documentElement.clientLeft > Common.getViewportSize.w - 20) {
                        div.style.left = mosPos.x - downMouseLeft - div.offsetWidth + "px";
                    } else {
                        div.style.left = mosPos.x + downMouseLeft + "px";
                    }
                }
                else {
                    div.style.top = elPos.y - div.offsetHeight + "px";
                    if (mosPos.x + div.offsetWidth + document.documentElement.clientLeft > Common.getViewportSize.w - 20) {
                        div.style.left = mosPos.x - upMouseLeft - div.offsetWidth + "px";
                    } else {
                        div.style.left = mosPos.x + upMouseLeft + "px";
                    }
                }
                
                ///hide tooltip after some time
                if (param && param.time) {
                    setTimeout(this.hidToolTip, param.time);
                }
            },
            hidToolTip: function() {
                if (document.getElementById("toolTipDiv")) {
                    document.getElementById("toolTipDiv").style.display = "none";
                }
            },
            addTips: function(param) {
                var linkArr = document.getElementsByTagName("a");
                if (!linkArr) { return false; }
                for (i = 0; i < linkArr.length; i++) {
                    if (linkArr[i].className == "toolTip") {
                        linkArr[i].tip = linkArr[i].title;
                        var tipObj = this;
                        linkArr[i].onmouseover = function(e) { tipObj.showToolTip(param, this, e); }
                        linkArr[i].onmouseout = tipObj.hidToolTip;
                        if (param && param.moveable == true) {//默认不滚动
                            linkArr[i].onmousemove = function(e) { tipObj.showToolTip(param, this, e); }
                        }
                        linkArr[i].title = "";
                    }
                }
            }
        }

        window.onload = function() {
            ToolTip.addTips({ width: 200 }); // time:5000, moveable: true 
        }
    </script>   
</head>
<body style="min-width:700px; ">  
<script type="text/javascript">
    Common.getViewportSize = { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : (document.body ? document.body.offsetWidth : 0), h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body ? document.body.offsetHeight : 0) };            
</script>  
    <a href="#" class="toolTip" title="Top Value, display below" >Host name</a> 
    <div style="height:200px;"></div>
    <a style="float:right" href="#" class="toolTip" title="BI Scorecard , Exclusion Rules - Host name , Omniture Active has been updated " >Omniture Host name Active has been updated</a> 
    <div style="height:200px;"></div>
    <a href="#" class="toolTip" title="BI Scpdated orecard , Exclusion Rul niture Ac" >Exclusion Rules - Host name</a> 
    <br /><br /><br />
     <a href="#" class="toolTip" title="BI Scp" >Host name</a> 
</body>
</html>

使用：在window.onload中调用：ToolTip.addTips()。可以设置可选参数如：{ width: 200, time:5000, moveable: true } 。width表示显示内容宽度200px，超过则换行，默认未设置则提示内容在一行中显示。time:5000表示在提示内容显示5秒后消失，默认未设置则永远不消失。moveable: true表示，当鼠标在该元素上移动时，显示内容的层跟随鼠标移动，默认未设置则不移动，如title就是不移动的。

一些实现的注意点：文档加载时执行的ToolTip.addTips对所有class是toolTip的文档链接元素a绑定onmouseover，onmouseout，onmousemove事件，并把原来的title值清空（如果是其他类型元素，或者其他的需求，进行相关修改即可）。

主要的实现方法就是ToolTip.showToolTip。upMouseLeft，downMouseLeft是设置层的左边沿离鼠标的距离，如果层在a元素上面显示，则取upMouseLeft，下面显示则取downMouseLeft，这个设置仅是为了效果更好，使层在垂直方向不是正对着鼠标位置。默认层是在元素a的上方和鼠标右方显示，当上方显示不下时在下方显示，当右侧显示不下时在左侧显示，具体见code的If判断。

很多框架提供的tooltip很酷，如下

其实就是1个图片的DIV+内容DIV，点此下载查看。

点击下载

posted on 2010-05-31 23:06 JayChow 阅读(7120) 评论(13) 编辑收藏举报

刷新页面返回顶部

JS实现tooltip的封装

公告