Geek Answers Handbook

Can my tips be adapted for the touch screen?

I worked on tool tips for my ads, which bust a lot of jargon - they show with a simple mouse. Obviously, they do not work on touch interfaces.

I am limited to perfectly pure HTML5 and CSS3, definitely no jquery, ideally no javascript. I tried to change (or rather add): active to: hover class, but nothing happens on the touch screen at all.

Current HTML and CSS

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

There are some animations and tricks in CSS (and I didn’t turn on the animation using the link), but you get the idea), basically the window disappears and appears when you hover over it - and there is also a full one on a white background that fades out with a little opacity to focus on the drawer above the box - it doesn't really matter if that doesn't happen on touchscreen devices.

I suspect that significant changes may be required to get the same pop-up when clicking on devices with a touch screen.

+6
source share
2 answers

Yes, there is a way.

First add the ontouchstart attribute to your button. Second: add a style for: active ,: focus and: hover.

I tested this on iOS and it works. (Did not try with 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>
+1
source

One way to do this is to add the tabindex attribute to your .tiptext elements, giving it a value of -1 . This will allow the elements to get focus and therefore be selected with the :focus pseudo-class.

You also need to add the touchstart event to the body tag (or to any parent element of the elements you work with) so that iOS recognizes :active and :focus pseudo-classes.

 <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>
+1
source

More articles:


All Articles