学习笔记:用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(); // 添加元素

代码如下:

1
2
3
4
5
6
7
8
9
10
// 创建一个 div 元素
var toolTipBox = document.createElement("div");

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

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

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

1
2
3
4
5
toolTipBox.style.width = width + "px" || "auto";
toolTipBox.style.height = height + "px" || "auto";

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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 的区别

当鼠标离开时,将提示框隐藏:

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

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


事件的处理

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 添加事件函数
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