W3.CSS: Tooltip doesn't show outside the responsive table

Question

I'm using W3.CSS and its responsive tables. I would like to add custom tooltips (also from W3), but when I add tooltip into the cell in the first row, then the tooltip is not visible outside the table (see the snippet). Any solution? I have tried z-index: 1 !important; but with no success...

My solution: added padding to .w3-responsive with size of the tooltip.

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

That's because the parent div: .w3-responsive has the overflow-x: auto; - change it to overflow: visible; or remove it. It should solve it. — Osvaldo Correia, Apr 07 '21 at 19:37
That's correct. The overflow:auto (because responsive) and the tooltip "position:relative" are the causes of this. However (you should test it) it seems that tooltips doesn't works on mobile because the hover. So, may be you can't use it togheter on mobile anyway. — L. Alejandro M., Apr 08 '21 at 04:01
@OsvaldoCorreia Thank you both! But if I change the overflow value won't it affect the "responsiveness" of the element (table)? — GilesNorthcott, Apr 08 '21 at 15:52
@L.AlejandroM. Mobile behavior: My plan is to use (in certain cases) these tooltips as a replacement for title atribute, and behavior on mobile is one of the reasons - on tooltip you can tap and the tooltip text will appear, the title attribute is however useless on mobile... — GilesNorthcott, Apr 08 '21 at 15:52
I have tried to change the overflow value and the tooltip is visible - but the table is no more responsive (on mobile)... — GilesNorthcott, Apr 08 '21 at 16:06

L. Alejandro M. · Answer 1 · 2021-04-10T07:05:48.160

Well, because you want a mobile behaviour, you must left out tooltips. At least, hover's tooltips. But you still can activate them programatically using JS. In other words, a popup. Since you are using w3.css you can read "How to create Popups" in th site of w3.css, as an alternative.

Using popup approaches is for consistency. You have control over the activation and deactivation and become clear for the user. On the other hand, according to Mozilla Developer Web Docs

"Note: The :hover pseudo-class is problematic on touchscreens. Depending on the browser, the :hover pseudo-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element. Web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities.

You said that tapping the text is acting like a click on tooltips on mobile environments, but as is noted upper, this is not standar.

Anyway, using popups, still remain having problem with the boundaries of the overflow. The solution could be to change the position of the popup to bottom, for example:

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

I'm afraid this is not a solution for me. As I wrote in my previous comment, the w3 tooltip behavior on mobile is not a problem - when you tap on the text with assigned tooltip, the tooltip will appear (on desktop tooltip will appear on hover), you can try it yourself. There is no reason to use a popups with JS with exactly the same behavior on mobile as tooltips. Besides, it doesn't solve my problem with w3-responsive overflow... — GilesNorthcott, Apr 09 '21 at 14:07

W3.CSS: Tooltip doesn't show outside the responsive table

1 Answers1