CSS Подсказка на мобильных устройствах не закрывается при втором нажатии

Question

У меня есть следующий код:

код:

<div id="A" class="tooltip">
<img style="border-bottom: 1px dotted black;"  src="some image.jpg" /> 
        <span class="tooltiptext">My hover over text</span>
</div>

css

.tooltip {position: relative; display: inline-block;}
.tooltip .tooltiptext { visibility: hidden;  width: 400px;  background-color: lightgray;  color: #000; font-size: 15px;font-weight: 100;  text-align: left;  border-radius: 6px;  padding: 5px;  position: absolute;  z-index: 1;  top: -5px;  right: 115%;    left: auto;    margin-left: 0px; }
.tooltip .tooltiptext::after { content: "";  position: absolute;    bottom: auto;  top: 50%;  left: 100%;  margin-top: -10px;  border-width: 10px; border-style: solid;border-color: transparent transparent transparent lightgrey;}
.tooltip:hover .tooltiptext {  visibility: visible;}

Что отлично работает на рабочем столе, когда вы наводите курсор на изображение, однако при нажатии на мобильном устройстве оно не исчезнет. Есть ли способ заставить это работать с CSS. Любая помощь приветствуется

Answer 1

На мобильном устройстве необходимо переключиться следующим образом:

<script type="text/javascript"> 
$(document).ready(
        function() {
            $("#A").click(function() {
                $("#Text_A").toggle();
            });
        });

    </script> 

<div id="A" class="tooltip">
<img id= "Text_A" style="border-bottom: 1px dotted black;"  src="some image.jpg" /> 
        <span class="tooltiptext">My hover over text</span>
</div>

Это сработало для меня CSS не изменилось

Answer 2

Обработка при наведении курсора зависит от мобильного браузера c. Большинство браузеров либо отображают состояние: hover перед удалением, либо постоянно при длительном нажатии. Единственный способ скрыть это, чтобы долго нажимать куда-то еще AFAIK. JS может потребоваться с решением на основе тайм-аута.