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!