W3.CSS：工具提示不显示在响应表之外

如何解决W3.CSS：工具提示不显示在响应表之外

我正在使用 W3.CSS 及其响应式表格。我想添加自定义工具提示（也来自 W3），但是当我将工具提示添加到第一行的单元格中时，工具提示在表格外不可见（请参阅代码段）。有什么解决办法吗？我试过 z-index: 1 !important; 但没有成功...

我的解决方案：将 padding 添加到 .w3-responsive 和工具提示的大小。

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  z-index: 1;
  position: absolute;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<!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">
<body>

<div class="w3-container">
<h3>Table</h3>
<div class="w3-responsive">
<table class="w3-table-all">
<tr>
  <th><span class="tooltip">Hover over me <span class="tooltiptext">Some tooltip text</span></span></th>
  <th>Last Name</th>
  <th>Points</th>
  <th>Points</th>  
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
  <td>50</td>  
</tr>
</table>
</div>

</div>

</body>
</html>

解决方法

好吧，因为您想要移动行为，所以必须省略工具提示。至少，悬停的工具提示。但是您仍然可以使用 JS 以编程方式激活它们。换句话说，一个弹出窗口。由于您使用的是 w3.css，因此您可以在 w3.css 的站点中读取“How to create Popups”作为替代。

使用弹出方法是为了保持一致性。您可以控制激活和停用，并让用户一目了然。另一方面，根据 Mozilla Developer Web Docs

"注意：:hover 伪类在触摸屏上是有问题的。根据浏览器的不同，:hover 伪类可能永远不会匹配，触摸元素后仅匹配片刻，或继续即使在用户停止触摸并且直到用户触及另一个元素。 Web 开发人员应确保内容可在具有有限或不存在悬停的设备上访问能力。

您说点击文本就像在移动环境中点击工具提示一样，但正如上面所指出的，这不是标准的。

无论如何，使用弹出窗口仍然存在溢出边界的问题。解决方案可能是将弹出窗口的位置更改为底部，例如：

<!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>

.popup {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.popup .popuptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the popup */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
} 

</style>
<body>
<div class="w3-container">
<h3>Table</h3>
<div class="w3-responsive">
<table class="w3-table-all">
<tr>
  <th>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
  <span class="popuptext" id="mypopup">A Simple Popup!</span>
</div>
  </th>
  <th>Last Name</th>
  <th>Points</th>
  <th>Points</th>  
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
  <td>50</td>  
</tr>
</table>
</div>

</div>
<script>
// When the user clicks on <div>,open the popup
function myFunction() {
  var popup = document.getElementById("mypopup");
  popup.classList.toggle("show");
}
</script>
</body>
</html>