Können meine Tooltips für den Touchscreen angepasst werden?

Question

Ich habe an den Tooltips für meine Anzeigen gearbeitet, die ziemlich viel Sprichwort haben - sie zeigen mit einer einfachen Maus vorbei. Offensichtlich funktionieren sie nicht auf Berührungsschnittstellen.

Ich bin auf ideal reine HTML5 und CSS3 beschränkt, definitiv keine jquery, im Idealfall kein Javascript. Ich habe versucht, zu ändern (oder vielmehr hinzufügen): aktiv in der: Hover-Klasse, aber nichts passiert auf einem Touchscreen überhaupt.

Aktuelle HTML und CSS ist

.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>

Es gibt einige Animationen und Tricks in der CSS-los (und ich habe nicht die Link-Hilfe Animation enthalten, aber Sie erhalten die Idee) Im Grunde verblasst die Box ein- und aus, wenn man mit der Maus darüber fährt - und es gibt auch einen weißen Hintergrund im Vollbildmodus, der mit etwas undurchsichtigem eingeblendet wird, um die Maus über die Box in den Fokus zu bringen - es ist keine große Sache, wenn dies nicht bei Berührung geschieht Bildschirmgeräte.

Ich vermute, es könnte erhebliche Änderungen erforderlich sein, um die gleiche Pop-up-Box auf Touch-Screen-Geräte zu drücken.

Answer 1

Ja, es gibt einen Weg.

Zuerst: Fügen Sie das Attribut "ontouchstart" zu Ihrer Schaltfläche hinzu. Zweitens: Fügen Sie einen Stil für: active,: focus und: hover hinzu.

Ich habe dies auf iOS getestet und es funktioniert. (Hab es nicht mit Android ausprobiert).

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

Eine Möglichkeit, es zu tun wäre, das tabindex Attribut auf Ihre .tiptext Elemente hinzuzufügen, einen Wert von -1 geben. Dadurch können die Elemente den Fokus erhalten und daher mit der Pseudoklasse :focus auswählbar sein.

Sie werden auch die touchstart Veranstaltung zu Ihrem body-Tag (oder einem übergeordneten Element der Elemente, die Sie gerade arbeiten) hinzufügen müssen, um iOS zu bekommen die :active und :focus Pseudoklassen zu erkennen.

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