Salve, sto usando un tooltip che usa i css (non posso usare javascript perchè mi da conflitti con altri javascript).
Sto usando lo stesso codice adattato sia per avere tooltip testuali e di immagini e funziona tutto bene sui normali schermi e con l'uso del mouse.
Il problema viene fuori quando la pagina si visualizza con schermo touch, in pratica l'immagine ed il testo vengono mostrati nel tooltip ma la pagina scrolla in su obbligando a scrollare manualmente in giù la pagina per vedere il risultato in opera. Spero di essere stato chiaro.... Vorrei risolvere questo problema dello scroll in alto con gli schermi touch
Questo è il codice che uso
codice:
<link rel="stylesheet" href="tooltip.css" type="text/css" media="screen" charset="utf-8" />

</head>

<body>


<p><a class="bottom" href="#"><app>DIVIETO DI TRANSITO AGLI AUTOCARRI CHE SUPERANO 3,5 T</app><span><img src="divietoditransitoMpesanti.jpg" style="float:right;" /></span></a>  </p>
  
<p> <a class="bottom" href="#"><app>segnali di pericolo</app><span>di solito a forma triangolare</span></a></p>




questo il css

codice:
@charset "utf-8";
/* CSS Document */
app {
    color: #8A0403;
    font-size:13px;
}
a.top{
  position: relative;
  display: inline;
}
a.top span {
  position: absolute;
  width:300px;
  color: #DBD972;
  background: #FFFFFF;
  height: 535px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}
a.top span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #0363EE;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.top span {
  visibility: visible;
  
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}

/*fine top*/

a.bottom {
  position: relative;
  display: inline;
}
a.bottom span {
  position: absolute;
  width:100px;
  color: #FFFFFF;
  background: #000000;
  height: 20px;
  line-height: 20px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}
a.bottom span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.bottom span {
  visibility: visible;
  
  top: 20px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}
/*fine bottom*/