CSS Hover текст / подсказка не работает на мобильном

Question

Я только что закончил добавлять подсказки на мой сайт.Я создал их, скопировав и вставив код из учебника ниже.

https://www.w3schools.com/css/css_tooltip.asp

Все отлично работает на ПК, но на мобильных устройствах (я на Android, если это важно) это полностью сломано.Он функционирует так, как если бы CSS-классов вообще не было, т. Е. Текст, который следует скрыть как часть всплывающей подсказки, вместо этого просто печатается на странице.

Кто-нибудь знает, что я мог сделать неправильно?

Рабочая подсказка

Не рабочая подсказка

Answer 1

Если всплывающая подсказка не должна отображаться на мобильном телефоне, ее можно скрыть с помощью медиа-запросов.Приведенный ниже пример сделан на основе HTML и CSS из примера w3school, которым вы поделились.Обратите внимание, что без примера вашего рабочего HTML и CSS, возможно, что-то еще переопределяет всплывающую подсказку и заставляет ее появляться.В этом случае вам придется проверить его в мобильном представлении с помощью инструментария разработчика браузера, чтобы увидеть, что это может быть.

@media only screen and (min-width:40em) {
  .tooltip .tooltiptext { display:none;}
}