学习笔记：用JavaScript实现提示框效果

提示框效果（tooltip）是常见的网页特效，它的功能是当用户将指针放置在控件上时为用户显示提示信息。

实现原理

我们将需要显示提示框的部分称为：tooltip 超链接。

当鼠标移动到 tooltip 超链接上时，首先判断是否存在与之对应的提示框元素，如果存在就将其显示；不存在的话就用JavaScript代码创建一个新的 DOM 元素，然后将新建的 DOM 元素附在原来的 tooltip 超链接元素后面。

每个ToolTip提示框都是一个 div 元素，新建 DOM 元素的格式是类似这样的：

1	<div class="tooltip" id="xx"> xxxxxx </div>

这里将用到两个函数：

1 2	document.createElement(); // 创建一个 HTML 元素 .appendChild(); // 添加元素

代码如下：

// 创建一个 div 元素
var toolTipBox = document.createElement("div");     

// 设置提示框元素的属性
toolTipBox.className = toolTipBoxClass;
toolTipBox.id = id;
toolTipBox.innerHTML = html;

// 将提示框元素添加在 Tooltip 超链接的后面
obj.appendChild(toolTipBox);

然后设置提示框的宽、高、显示方式等属性：

toolTipBox.style.width = width + "px" || "auto";
toolTipBox.style.height = height + "px" || "auto";

toolTipBox.style.position = "absolute";
toolTipBox.style.display = "block";

最后确定提示框的位置，提示框应该显示在 tooltip 超链接的下面，并且不超出浏览器窗口的范围：

// Tooltip 超链接左上角的坐标
var left = obj.offsetLeft;
var top = obj.offsetTop;

// 保证 Tooltip 提示框不会超出浏览器的窗口
if (left + toolTipBox.offsetWidth > document.body.clientWidth) {
    var demoLeft = document.getElementById("demo").offsetLeft;
    left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;
    if (left < 0) {
        left = 0;
    }
}
toolTipBox.style.left = left + "px";
toolTipBox.style.top = top + 20 + "px";

如果提示框元素已经存在了，只需要将它显示出来：

1	document.getElementById(id).style.display = "block";

鼠标的移入和移出

我们需要实现的效果是：当鼠标移至 ToolTip 超链接上时，显示提示框；当鼠标离开时，隐藏提示框。

这里鼠标的动作对应的事件是：

1 2	onmouseenter // 鼠标进入 onmouseleave // 鼠标离开

注意：mouseenter 和 onmouseover 的区别

当鼠标离开时，将提示框隐藏：

obj.onmouseleave = function() {
    setTimeout(function() {
        document.getElementById(id).style.display = "none";
    }, 300);
}

setTimeout() 表示在给定时间间隔后执行代码一次。注意 setInterval()会循环执行代码，而setTimeout()只会执行一次。

事件的处理

为了实现效果，我们可以分别获取文件中的每一个 Tooltip 超链接元素，并将我们的 showToolTip() 函数绑定在超链接的元素的 onmouseenter 对象上。以第一个 Tooltip 超链接为例：

var t1 = document.getElementById("tooltip1");
t1.onmouseenter = function() {
    showToolTip(this, "t1", "hello world", 200);
}

对其余的 ToolTip 超链接也进行类似的操作。

这样的写法为每一个 Tooltip 超链接元素都添加了事件处理程序，会使页面性能变差，可以使用事件冒泡来解决这一问题。

事件冒泡指的是在更高的层次上添加一个事件处理程序，来处理所有的 ToolTip 超链接上的事件。这里是将事件添加到了上一级 id="demo" 的 div 上。

// 添加事件函数
function addEvent(element, event, callbackfunction) {
    if (element.addEventListener) {
        element.addEventListener(event, callbackfunction, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, callbackfunction);
    }
}


// 利用事件冒泡来处理所有的 Tooltip 超链接的鼠标移入事件
addEvent(demo, "mouseover", function(e) {
    var event = e || window.event;
    var target = event.target || event.srcElement;

    // 处理发生在 tooltip 超链接上的事件
    if (target.className == "tooltip") {
        var _html;
        var _id;
        var _width = 200;

        switch (target.id) {
            case "tooltip1":
                _id = "t1";
                _html = "HyperText Markup Language";
                break;
            case "tooltip2":
                _id = "t2";
                _html = "<h2>JavaScript的5种基本数据类型：</h2><p>Undefined</p><p>Null</p><p>Boolean</p><p>Number</p><p>String</p>";
                break;
            case "tooltip3":
                _id = "t3";
                _html = "<img src='marvin.jpg'>";
                _width = 220;
                break;
            case "tooltip4":
                _id = "t4";
                _html = "<img src='marvin.jpg' width='150px'> <p><strong>姓名：Wu Kai</strong></p><p>简介：正在学习中的前端程序员</p>";
                _width = 200;
                break;
            case "tooltip5":
                _id = "t5";
                _html = '<iframe src="http://noiron.github.io" width="600" height="600"></iframe>';
                _width = 600;
                break;
            default :
                return false;
        }
        showToolTip(target, _id, _html, _width);
    }
});

至此，tooltip 提示框的效果就完成了。

参考资料与演示：

慕课网：Tooltip浮动提示框效果

我的代码

在线 demo