Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can my tooltips be adapted for touch screen?

Tags:

html

css

I've worked on the tool tips for my adverts which bust jargon quite a lot - they show with a simple mouse over. Obviously they don't work on touch interfaces.

I'm limited to ideally pure HTML5 and CSS3, definitely no jquery, ideally no javascript. I've tried changing (or rather adding) :active to the :hover class but nothing happens on a touch screen at all.

Current HTML and CSS is

.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 some animations and trickery going on in the CSS (and I haven't included the link-help animation but you get the idea) basically the box fades in and out when you mouse over it - and there is also a full screen white background that fades in with a little opaque to bring the moused over box into focus - its no big deal if this doesn't happen on touch screen devices.

I suspect there might need to be substantial changes to get the same pop up box on press on touch screen devices.

like image 816
Danny Shepherd Avatar asked May 10 '16 20:05

Danny Shepherd


1 Answers

Yes, there is a way.

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

I have tested this on iOS and it works. (Haven't tried it out 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>
like image 74
haltersweb Avatar answered Sep 28 '22 05:09

haltersweb