tooltip con css su schermo touch

**he-man** · 13-05-2016, 12:55

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*/

**lucavizzi** · 14-05-2016, 15:48

Sostituisci gli

codice:

href="#"

con

codice:

href="javascript:void(0)"

**KillerWorm** · 14-05-2016, 15:55

Ciao e benvenuto.

Quoto la soluzione di lucavizzi ma aggiungo giusto qualche dettaglio (ormai avevo già scritto il post quando lucavizzi ha risposto

)

Il problema non è strettamente legato al CSS ma alla normale azione di href del tag <a>.

In particolare href="#" non è sufficiente a creare un link fittizio, perché questo continuerà a funzionare esattamente come un ancora interna. Il cancelletto "#" è usato proprio per creare delle ancore interne alla pagina, ma solitamente è seguito dal valore id a cui deve puntare il link (ad esempio href="#IDdiUnQualcheElementoACuiPuntareSullaStessa Pagina").

Nel tuo caso, non essendoci alcun id di riferimento (sebbene il markup sia valido), il browser scorrerà la pagina semplicemente all'inizio, come da normale comportamento.

Sia chiaro, il link deve essere cliccato perché agisca. Questo probabilmente è il motivo per cui si ha il problema su touchscreen, perché suppongo che avvenga una sorta di click. Ma lo stesso problema dovrebbe presentarsi anche nell'uso più convenzionale col mouse, se si esegue il click su quei link (ovviamente nella situazione in cui la pagina non sia già all'inizio).

La soluzione è facile. In sostanza bisogna impedire il normale comportamento del link.
Si può fare in diversi modi, uno dei quali è quello già proposto da lucavizzi.

non posso usare javascript perchè mi da conflitti con altri javascript

Lo prendo per buono, ma tieni presente che esistono dei metodi (identificati in genere sotto il termine noconflict) proprio per risolvere problemi di conflitto tra diversi script, specialmente (ma non esclusivamente) quando si tratta di diverse librerie o framework JavaScript che devono convivere nella stessa pagina.

Se poi tu preferisci la soluzione CSS non c'è nulla da dire, ma questo non esclude a priori che si possa in qualche modo usare una soluzione JavaScript.

Buon proseguimento

**he-man** · 18-05-2016, 21:54

Cari Signori, tollerate il ritardo nel ringraziarvi ma ho avuto qualche problema. Soluzioni entrambe interessanti vedrò di applicarle al più presto per farvi sapere come mi sono trovato meglio. Entrambe gentilissimi e così chiari che devo solo testare!

**he-man** · 18-05-2016, 21:55

Dimenticavo....

Discussione: tooltip con css su schermo touch

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

tooltip con css su schermo touch

Permessi di invio