我的工具提示可以适应触摸屏吗？ [英] Can my tooltips be adapted for touch screen?

问题描述

我已经为我的广告工作了很多工具提示，他们用一个简单的鼠标显示。显然他们不能在触摸界面上工作。

我限制在理想的纯HTML5和CSS3，绝对没有jQuery，最好没有javascript。我尝试更改（或添加）：active：hover类，但在触摸屏上根本没有任何反应。

当前的HTML和CSS是

  .tiptext {cursor：help;颜色：黑色; 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）;过渡：背景.15s立方贝赛尔（.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：;位置：固定; top：0;左：0; right：0; bottom：0; pointer-events：none;颜色：透明; 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;背景：白色; 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指数：500; position：absolute; margin-left：50px; margin-top：20px; cursor：default; display：inline-block;}。tiptext> .description {visibility：hidden;不透明度：0; transition：visibility 0s linear 0.4s，opacity 0.4s linear;}。tiptext：hover> .description {visibility：visible;不透明度：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 =descriptionstyle =text-align：center;>您可以在此弹出式框中< / span>   

一些动画和诡计在CSS中（我没有包括链接帮助动画，但你得到的想法）基本上盒子淡入淡出，当你的鼠标在它 - 而且还有一个全屏的白色背景淡入淡出，有点不透明，将鼠标悬停在方块上，这一点非常重要 - 如果触摸屏设备上没有发生这种情况，那就没什么大不了的了。

我怀疑可能需要在触摸屏设备上获得相同的弹出框。

解决方案

一种方法是添加 tabindex 属性到 .tiptext 元素，赋值为 -1 。这将允许元素接收焦点，因此可以用：focus 伪类选择。

您还需要将 touchstart 事件添加到您的正文标记（或元素的任何父元素，重新使用），以便让iOS识别：active 和：focus 伪类。

 < body ontouchstart> 
  

  .tiptext {cursor：help;颜色：黑色; 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）;过渡：背景.15s立方贝塞尔（.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：;位置：固定; top：0;左：0; right：0; bottom：0; pointer-events：none;颜色：透明; 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： e3e3e3;背景：白色; 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指数：500; position：absolute; margin-left：50px; margin-top：20px; cursor：default; display：inline-block;}。tiptext> .description {visibility：hidden;不透明度：0; transition：visibility 0s linear 0.4s，opacity 0.4s linear;}。tiptext：focus> .description，.tiptext：hover> .description {visibility：visible;不透明度：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 = tiptexttabindex = -  1> < span class =descriptionstyle =text-align：center;>您可以在此弹出式框中< / span>  
 

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.

解决方案

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

You'll also need to add the touchstart event to your body tag (or any parent element of the elements you're working with) in order to get iOS to recognise the :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>

这篇关于我的工具提示可以适应触摸屏吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！