我试图将CSS工具提示不仅应用于单元格，而且应用于整个表的表格，但我不知道如何。
目前，我只能在单元格上应用工具提示（如您在代码段中所见）。是否可以将CSS工具提示应用于<tr>元素？怎么样？
This new gif shows exactly what I'm trying to achieve
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: none;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body>
<div class="w3-container">
<h2>Directory Test</h2>
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-light-grey">
<th>Name</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td><div class="tooltip">Name #1<span class="tooltiptext"><img src="http://arsil.games/images/logo-02.png"></span></div></td>
<td>Director #1</td>
<td>152</td>
<td>Email #1</td>
</tr>
</table>
</div>
</body>
</html> 提前感谢
如果我了解您要实现的目标，则只需将工具提示div插入该行中每个表格的单元格中，如下所示：
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
/*visibility: hidden;*/
display: none;
width: 120px;
background-color: none;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
/*visibility: visible;*/
display: block;
}
</style>
<body>
<div class="w3-container">
<h2>Directory Test</h2>
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-light-grey">
<th>Name</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td><div class="tooltip">Name #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
<td><div class="tooltip">Director #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
<td><div class="tooltip">152<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
<td><div class="tooltip">Email #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
</tr>
</table>
</div>
</body>
</html> 但是，我认为您并不真正了解这里的情况。这不是“ CSS工具提示”（不存在此类内容）。它只是一个用CSS样式的简单HTML元素，因此只要您将鼠标悬停在其父元素上，它就会显示自己。因此，无论您希望在何处出现工具提示，都需要添加该class="tooltip" div（及其子span元素）。
同样值得注意的是，这个div的格式在我看来似乎有些草率。在CSS中，您使用visibility: hidden而不是display: none设置了工具提示的样式。两者之间的区别在于，具有visibility: hidden的元素仍会占用空间（具有宽度和高度），而具有display: none的元素不会“占用空间”。我认为，对于工具提示，所需的选项将是display: none，因为通常只应将工具提示覆盖在网页的元素上。 （我提供的代码段已将visibility: hidden更改为display: none。）