Philip

Philip's blog

0%

html-tooltip

Posted on Edited on In
Symbols count in article: 908 Reading time ≈ 3 mins.

介绍

今天来点轻松的话题，如何给一个html元素添加tooltip，也就是鼠标悬停时显示一个提示信息。实现tooltip的方式有很多，我们逐一介绍一下。

方式一：使用html的title属性

最简单的方式就是使用html元素的title属性，给一个html元素添加title属性后，鼠标悬停时，浏览器会自动显示title属性的内容作为tooltip。

以下代码为div元素添加了一个tooltip，内容为”This is a tooltip”，当鼠标悬停在div元素上时，会显示这个tooltip。

1
<div title="This is a tooltip">Hover on me</div>
  • 优点：实现简单，不需要额外的css或js代码，浏览器会自动处理tooltip的显示和隐藏。
  • 缺点：tooltip的样式和位置无法自定义，完全依赖浏览器的默认行为。触发速度慢。

方式二： 使用CSS实现tooltip

首先定义元素的HTML结构，以下代码中，外层的div元素作为tooltip的触发区域，内层的span元素作为tooltip的内容。

1
2
3
4
<div class="tooltip">
  Hover over me
  <span class="tooltip-text">This is a custom tooltip</span>
</div>

然后使用CSS来实现tooltip，代码中有详细的注释，不再赘述。

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
.tooltip {
  /*采用相对定位将外层div元素放置在 100px, 100px处，防止tooltip超出窗口*/
  position: relative;
  top: 100px; 
  left: 100px;
  cursor: pointer; /* 鼠标悬停时显示为手型 */
}

/* tooltip的样式 */
.tooltip .tooltip-text {
  visibility: hidden; /* 默认隐藏，hover时才显示 */
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}

/* 这里用来绘制tooltip下面的小三角形 */
.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* hover时显示tooltip */
.tooltip:hover .tooltip-text {
  visibility: visible;
}
  • 优点：可以自定义tooltip的样式和位置，灵活性更高。触发速度快。
  • 缺点：需要编写额外的css代码，稍微复杂一些。

方式三：使用JavaScript实现tooltip

这是最灵活的方式了，可以完全自定义tooltip的行为和样式。以下代码中，我们使用JavaScript来动态创建和显示tooltip。

1
2
<div class="js-tooltip">How on me</div>
<div class="tooltip-container hidden">This is a JavaScript tooltip</div>

用js控制tooltip的显示和隐藏：

1
2
3
4
5
6
7
8
9
10
const div = document.querySelector(".js-tooltip");
const tooltip = document.querySelector(".tooltip-container");

div.addEventListener("mouseenter", () => {
  tooltip.style.display = "block";
});

div.addEventListener("mouseleave", () => {
  tooltip.style.display = "none";
});

用css定义tooltip的样式，这里写得比较简单，大家可以根据需要随意添加。

1
2
3
4
5
6
7
8
9
10
11
.js-tooltip {
  margin-top: 32px;
}

.tooltip-container {
  position: absolute;
  background: #333;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

总结

请以markdown表格的形式比较上述三种方式的优缺点，请添加一列显示速度。

方式 优点 缺点 显示速度
使用title属性 实现简单，不需要额外的css或js代码，浏览器会自动处理tooltip的显示和隐藏。 tooltip的样式和位置无法自定义，完全依赖浏览器的默认行为。 慢
使用CSS实现tooltip 可以自定义tooltip的样式和位置，灵活性更高。 需要编写额外的css代码，稍微复杂一些。 快
使用JavaScript实现tooltip 最灵活的方式，可以完全自定义tooltip的行为和样式。 需要编写额外的js代码，稍微复杂一些。 快

今天就到这里了，祝大家编程愉快，我们明天再见，觉得有用，就点个关注吧！

码字不易，在整个互联网充斥着大量AI生成的垃圾内容的今天，还在坚持纯古法手写的人不多， 我Philip是其中一个。