Tooltip in CSS

**Poulo** · 08-02-2018, 21:11

Salve a tutti,
nelle mie pagine web finora ho usato un tooltip in javascript (overlib.js) che funziona bene e la finestrella rimane attaccata al puntatore del mouse. Purtroppo ho scoperto che non funziona sui mobile devices (ho provato con uno smartphone).

Ho fatto varie ricerche sul web e ho trovato uno in Css
https://www.w3schools.com/css/css_tooltip.asp
l'ho personalizzato così

codice:

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #408080;
    color: #0030BD;
}
.tooltip:hover {color: #CC0000;}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #FBE6C6;
    color: #000000;
    text-align: center;
    font-family: times new roman, serif;
    font-size: 13px;
    border: 1px solid #408080;
    border-radius: 3px;
    padding: 2px 1px 3px 1px;
    position: absolute;
    z-index: 1;
    bottom: 115%;
    left: 50%;
    margin-left: -100px; /* Use half of the width (220/2= 110) to center the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border-width: 6px;
border-style: solid;
border-color: #408080 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

Il PROBLEMA è che quando la parola che attiva il tooltip è al margine della pagina, la finestra che si apre rimane in parte tagliata, cioè in parte fuori dallo schermo; cosa che non accadeva col precedente tooltip in js perché cmq si posizionava in automatico sempre all'interno dello schermo.
Qualcuno sa come applicare questa 'proprietà' al codice sopracitato?

Grazie in anticipo!

**Utonto Tonto** · 08-02-2018, 23:16

Facci vedere anche l'HTML

**Poulo** · 09-02-2018, 00:32

Ecco l'HTML

codice:

<!doctype html public "-//w3c//dtd html 4.0 Transitional//EN">
<HTML>
<HEAD> 
<TITLE>Storia della Repubblica di Genova</TITLE> 
<META NAME="keywords" CONTENT="storia repubblica Genova ligure genovese repubbliche marinare marinara commerci liguri Venezia history Genoa histoire Gênes">
<META NAME="description" CONTENT="La storia dei Liguri dall'età della pietra alla Repubblica di Genova fino al 1800">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style-resp.css" type="text/css">
<link rel="stylesheet" href="../stilepaolin.css" type="text/css">
<LINK REL="shortcut icon" href="../favicon.ico">
</HEAD>
<BODY style="margin:5px 8px 4px 9px;">
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:100;"></div>
<SCRIPT language="javascript" src="overlib.js"></SCRIPT>
<Div align="center">
<U>Lotte contro Pisa e Venezia (1200-1300)</U>
Genova aveva sempre fatto una politica di espansione commerciale marittima, riuscendo non senza contrasti, specialmente dopo le Crociate, a stabilire

<div class="tooltip">PIPPO
  <span class="tooltiptext">Aver nei porti orientali un quartiere ove poter vivere e trafficare secondo le proprie leggi, liberi come nella loro città</span>
</div>

<a href="javascript:void(0);" onmouseover="return overlib('<center>Aver nei porti orientali un quartiere ove poter vivere e trafficare secondo le proprie leggi, liberi come nella loro città</center>');" onmouseout="return nd();">colonie<img src="../imm/interrog2.gif" style="cursor:help" border="0" width="12" height="11"></A>
nel Levante, come allora si diceva, cioè in Siria, nelle terre dell'Impero d'Oriente, ecc.... 
</body></html>

dove "tooltip" PIPPO è il tooltip con CSS
l'altro sotto è il vecchio overlib con js

La pagina in linea è questa http://digilander.libero.it/paolore2/temp1/liguria/storia2.html

**Utonto Tonto** · 09-02-2018, 16:35

Al momento mi viene in mente solo di mettere "left: 0;" in ".tooltip .tooltiptext", così la finestrella viene spostata a sinistra sulla P.

**Poulo** · 09-02-2018, 20:54

Grazie per l'interessamento, ma purtroppo il problema non si risolve spostando l'apertura della finestrella, perché la parola su cui agisce il tooltip può essere sul margine sinistro o destro dello schermo, a seconda della larghezza dello stesso, cioè al cambiare del tipo di dispositivo con cui l'utente visita il sito cambia l'impaginazione e quindi la posizione della parola che attiva il tooltip.
Bisognerebbe fare in modo che automaticamente la finestrella resti sempre all'interno dello schermo o margine della pagina, come avviene col vecchio javascript overlib.js.

A qualcunaltro viene in mente una soluzione?

Discussione: Tooltip in CSS

Strumenti discussione

Ricerca discussione

Visualizza

Tooltip in CSS

Tag per questa discussione

Permessi di invio