I miei tooltip possono essere adattati per il touch screen?

Question

Ho lavorato ai suggerimenti degli strumenti per le mie inserzioni che fanno molto parlare i gergo - mostrano con un semplice mouse sopra. Ovviamente non funzionano su interfacce touch.

Sono limitato a idealmente puro HTML5 e CSS3, sicuramente nessun jquery, idealmente nessun javascript. Ho provato a cambiare (o meglio ad aggiungere): attivo alla classe: hover ma non succede nulla sul touch screen.

HTML e CSS corrente è

.tiptext { 
 
    cursor: help; 
 
    color: black; 
 
    font-family: 'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
 
    font-weight: 600 !important; 
 
    border-bottom: 1px solid #ebebeb; 
 
    box-shadow: inset 0 -5px 0 #ebebeb; 
 
    -webkit-transition: background .15s cubic-bezier(.33, .66, .66, 1); 
 
    transition: background .15s cubic-bezier(.33, .66, .66, 1); 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
    line-height: 172%; 
 
    -webkit-animation-name: link-helpoff; 
 
    -webkit-animation-duration: 1s; 
 
    animation-name: link-helpoff; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    transition-delay: 0.4s; 
 
} 
 
.tiptext::after { 
 
    content: ""; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    pointer-events: none; 
 
    color: transparent; 
 
    background-color: transparent; 
 
    transition: background-color 0.5s linear; 
 
} 
 
.tiptext:hover::after { 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
} 
 
.description { 
 
    border: 1px solid #e3e3e3; 
 
    background: white; 
 
    width: auto; 
 
    max-width: 275px; 
 
    height: auto; 
 
    padding: 10px; 
 
    font-family: 'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
 
    font-weight: 300; 
 
    color: rgb(39, 44, 45); 
 
    font-size: 13px; 
 
    z-index: 500; 
 
    position: absolute; 
 
    margin-left: 50px; 
 
    margin-top: 20px; 
 
    cursor: default; 
 
    display: inline-block; 
 
} 
 
.tiptext > .description { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: visibility 0s linear 0.4s, opacity 0.4s linear; 
 
} 
 
.tiptext:hover > .description { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition-delay: 0s; 
 
    -webkit-transition: opacity 0.2s ease-in; 
 
    -moz-transition: opacity 0.2s ease-in; 
 
    -ms-transition: opacity 0.2s ease-in; 
 
    -o-transition: opacity 0.2s ease-in; 
 
    transition: opacity 0.2s ease-in; 
 
} 
 
.tiptext:hover { 
 
    color: black; 
 
    -webkit-animation-name: link-help; 
 
    -webkit-animation-duration: 0.6s; 
 
    animation-name: link-help; 
 
    animation-duration: 0.6s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    transition-delay: 0s; 
 
}

<span class="tiptext"> 
 
    <span class="description" style="text-align:center;">You can read more about the topic in this pop up box</span> 
 
    Mouse over me to learn more. 
 
</span>

Ci alcune animazioni e inganno in corso nel CSS (e non hanno incluso l'animazione link-aiuto, ma si ottiene l'idea) in pratica la finestra si dissolve in avanti e indietro quando si passa il mouse su di essa - e c'è anche uno sfondo bianco a schermo intero che si affievolisce con un po 'opaco per mettere a fuoco la scatola con il cursore del mouse - non è un grosso problema se questo non avviene al tocco dispositivi dello schermo.

Ho il sospetto che potrebbe essere necessario apportare modifiche sostanziali per ottenere la stessa casella di pop-up sulla stampa sui dispositivi touch screen.

Answer 1

Sì, c'è un modo.

Primo: aggiungi l'attributo "onuchstart" al tuo pulsante. Secondo: aggiungere uno stile per: attivo,: focus e: hover.

Ho provato questo su iOS e funziona. (Non l'ho provato con Android).

div { 
 
    display: none; 
 
} 
 
button { 
 
    width: 200px; 
 
    height: 50px; 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
    
 
} 
 
button:active, 
 
button:focus, 
 
button: hover { 
 
    background-color: blue; 
 
} 
 
button:active + div, 
 
button:focus + div, 
 
button:hover + div { 
 
    display: block; 
 
}

<p>Hello</p> 
 
<button ontouchstart>Activate</button> 
 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, ipsa, officiis! Est voluptatibus explicabo sed atque provident vel deleniti nulla quis, ipsa quas dolorum, dolorem cum possimus accusamus impedit nostrum!</div> 
 
<p>Goodbye</p>

Answer 2

Un modo per farlo sarebbe quello di aggiungere l'attributo tabindex ai vostri .tiptext elementi, dandogli un valore di -1. Ciò consentirà agli elementi di ricevere il focus e, pertanto, essere selezionabili con la pseudo-classe :focus.

È inoltre necessario aggiungere l'evento touchstart al body tag (o qualsiasi elemento principale degli elementi che si sta lavorando con) al fine di ottenere iOS per riconoscere i :active e :focus pseudo-classi.

<body ontouchstart> 

.tiptext { 
 
    cursor: help; 
 
    color: black; 
 
    font-family: 'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
 
    font-weight: 600 !important; 
 
    border-bottom: 1px solid #ebebeb; 
 
    box-shadow: inset 0 -5px 0 #ebebeb; 
 
    -webkit-transition: background .15s cubic-bezier(.33, .66, .66, 1); 
 
    transition: background .15s cubic-bezier(.33, .66, .66, 1); 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
    line-height: 172%; 
 
    -webkit-animation-name: link-helpoff; 
 
    -webkit-animation-duration: 1s; 
 
    animation-name: link-helpoff; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    transition-delay: 0.4s; 
 
} 
 
.tiptext::after { 
 
    content: ""; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    pointer-events: none; 
 
    color: transparent; 
 
    background-color: transparent; 
 
    transition: background-color 0.5s linear; 
 
} 
 
.tiptext:focus::after,.tiptext:hover::after { 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
} 
 
.description { 
 
    border: 1px solid #e3e3e3; 
 
    background: white; 
 
    width: auto; 
 
    max-width: 275px; 
 
    height: auto; 
 
    padding: 10px; 
 
    font-family: 'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
 
    font-weight: 300; 
 
    color: rgb(39, 44, 45); 
 
    font-size: 13px; 
 
    z-index: 500; 
 
    position: absolute; 
 
    margin-left: 50px; 
 
    margin-top: 20px; 
 
    cursor: default; 
 
    display: inline-block; 
 
} 
 
.tiptext > .description { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: visibility 0s linear 0.4s, opacity 0.4s linear; 
 
} 
 
.tiptext:focus > .description,.tiptext:hover > .description { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition-delay: 0s; 
 
    -webkit-transition: opacity 0.2s ease-in; 
 
    -moz-transition: opacity 0.2s ease-in; 
 
    -ms-transition: opacity 0.2s ease-in; 
 
    -o-transition: opacity 0.2s ease-in; 
 
    transition: opacity 0.2s ease-in; 
 
} 
 
.tiptext:focus,.tiptext:hover { 
 
    color: black; 
 
    -webkit-animation-name: link-help; 
 
    -webkit-animation-duration: 0.6s; 
 
    animation-name: link-help; 
 
    animation-duration: 0.6s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    transition-delay: 0s; 
 
}

<span class="tiptext" tabindex="-1"> 
 
    <span class="description" style="text-align:center;">You can read more about the topic in this pop up box</span> 
 
    Mouse over me to learn more. 
 
</span>