Блог

Главная - Вопросы по программированию - почему всплывающие подсказки css не появляются и не исчезают при нажатии на ссылку и за ее пределами в Safari для iOS?

почему всплывающие подсказки css не появляются и не исчезают при нажатии на ссылку и за ее пределами в Safari для iOS?

#css #ios

Вопрос:

Я продублировал этот скрипт для 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>

В Safari для iOS практически невозможно отобразить всплывающую подсказку при нажатии (и заставить ее исчезнуть при нажатии на страницу с белым фоном).

Однако, когда я захожу на веб-страницу w3schools из Safari для iOS, она работает отлично.

Заглянув на исходную страницу, можно увидеть несколько вызываемых сценариев, один из которых

Если я просто добавлю эту строку с функциями, исключающими ошибки консоли, внезапно всплывающая подсказка будет отлично работать в Safari для 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>

Почему? Скрипт вызывает файл, который не имеет абсолютно ничего общего с демонстрацией.

Большое спасибо за вашу помощь 🙂 Я бы очень хотел сохранить чистый CSS-код с помощью подсказок.

Ответ №1:

Добавление onclick в тег тела-это обходной путь: https://dev.webonomic.nl/fixing-the-iphone-css-hover-problem-on-ios

Метки: