用JavaScript实现提示框效果

特效实现

浏览数:1,152

2017-12-17

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

实现原理

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

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

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

xxxxxx

这里将用到两个函数:

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";

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

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

鼠标的移入和移出

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

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

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

原文链接:http://www.wukai.me/2016/01/04/tooltip-effect/