给定一个 HTML 表格,任务是在不使用 JavaScript 的情况下向表格单元格添加工具提示。有两种方法可以解决这个问题,下面讨论:
方法一:
- 创建一个 HTML 表格。
- 将标题属性(title = “someTitle”)添加到表格单元格以添加工具提示。
示例 1:此示例实现了上述方法。
How to add tooltip to HTML table
cell without using JavaScript ?
GeeksForGeeks
Attr 1
Attr 2
Attr 3
1, 1
1, 2
1, 3
2, 1
2, 2
2, 3
输出:
- 在将鼠标悬停在单元格上之前:
- 将鼠标悬停在单元格上后:
方法二:
- 创建一个 HTML 表格。
- 在我们要添加工具提示的表格单元格中创建一个 元素。
- 最初设置display: none的 元素。
- 每当用户将鼠标悬停在此特定元素上时,只需将属性更改为display: block 。
示例 2:此示例实现了上述方法。
How to add tooltip to HTML table
cell without using JavaScript ?
GeeksForGeeks
Hover over the 1, 2 to see the tooltip.
Attr 1
Attr 2
Attr 3
1, 1
1, 2
Tooltip
1, 3
2, 1
2, 2
2, 3
输出:
- 在将鼠标悬停在单元格上之前:
- 将鼠标悬停在单元格上后: