why css tooltips don't appear and disappear when tapping over and outside the link on Safari for iOS?

I have duplicated this script for W3schools: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_bottom

.tooltip {    position: relative;    display: inline-block;    border-bottom: 1px dotted black;  }    .tooltip .tooltiptext {    visibility: hidden;    width: 120px;    background-color: black;    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;  }

<h2>Bottom Tooltip</h2>  <p>Move the mouse over the text below:</p>    <div class="tooltip">Hover over me    <span class="tooltiptext">Tooltip text</span>  </div>

On Safari for iOS, it's almost impossible to display the tooltip on tap (and to make it disappear when tapping on the white background page).

However, when I access the w3schools webpage from Safari for iOS, it works perfectly.

Looking into the source page, there are some scripts called, one of them being

If I just add this line, with functions escaping console errors, suddenly the tooltip works perfectly on Safari for iOS.

.tooltip {    position: relative;    display: inline-block;    border-bottom: 1px dotted black;  }    .tooltip .tooltiptext {    visibility: hidden;    width: 120px;    background-color: black;    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;  }

<script src="//cdn.snigelweb.com/pub/w3schools.com/snhb-loader.min.js"></script>  <h2>Bottom Tooltip</h2>  <p>Move the mouse over the text below:</p>    <div class="tooltip">Hover over me    <span class="tooltiptext">Tooltip text</span>  </div>

Why? The script calls a file that has absolutely nothing related to the demo.

Thanks a lot for your help :) I'd really like to keep a pure CSS code using tooltips.

https://stackoverflow.com/questions/66924756/why-css-tooltips-dont-appear-and-disappear-when-tapping-over-and-outside-the-li April 03, 2021 at 04:16AM