Вот мой код, который отображает небольшую подсказку / всплывающее окно с: hover.
Он отлично работает в большинстве браузеров, но после интеграции с моим существующим веб-сайтом (см. Звездочку, выделенную курсивом здесь https://www.aerien.ch/oiseaux/Sterna_lunata.php), подсказка всегда видна в браузере Android, никогда не виднана мобильном телефоне Chrome (хотя в браузерах ПК это все еще хорошо, но инспекторы браузеров на ПК не позволяют мне найти причину этой проблемы, так как она прекрасно работает и с адаптивным просмотром!
Возможно, некоторые родительские CSS: display: float: или position: inheritance может блокировать видимость: используемое здесь поведение?
Я знаю, что CSS на этом сайте - беспорядок, но если у кого-то есть идея, это было бы здорово.
Вот «изолированный» CSS, который отлично работает на нескольких протестированных мной браузерах:
<html>
<head>
<title>Mobile browsers issues with pop up tip</title>
<style type="text/css">
#clements_trig {
/* sup */
font-size: 100%;
line-height: 0;
vertical-align: baseline;
top: -0.5em;
position: relative;
display: inline-block;
padding: 5px;
color: DarkRed;
}
#clements_trig:hover #clements_cont {
visibility: visible;
top: -5px;
left: 105%;
}
#clements_cont {
visibility: hidden;
white-space: nowrap;
font-size: 85%;
background: ivory;
position: absolute;
text-align: left;
padding: 5px 10px 5px 5px;
border-radius: 5px;
border: 1px solid #999999;
line-height: 1.5;
}
</style>
</head>
<body>
<span class="linkp" id="clements_trig">*<span id="clements_cont">Clements 2018 : <br>famille : Acrocephalidae</span></span>
</body>
Спасибо за любой совет.