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ì
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.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; }
Qualcuno sa come applicare questa 'proprietà' al codice sopracitato?
Grazie in anticipo!