我的工具提示可以适用于触摸屏吗？

我已经为我的广告制作了一些工具提示，这些提示使用了很多专业术语 - 它们以简单的鼠标显示。显然，他们不能在触摸界面上工作。我的工具提示可以适用于触摸屏吗？

我仅限于理想纯HTML5和CSS3，绝对不是jQuery，理想情况下不是JavaScript。我试过改变（或者说加入）：active：hover类，但在触摸屏上根本没有任何反应。

当前HTML和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>

有一些动画和弄虚作假的CSS事情（和我没有将链接帮助的动画，但你的想法）基本上，当你将鼠标放在它上面时，这个盒子会淡入淡出 - 还有一个全屏幕的白色背景，它会淡入一点点不透明的状态，以便将蒙上眼睛的盒子放到焦点上 - 如果触摸时不发生这种情况，屏幕设备。

我怀疑可能需要进行实质性更改才能在触摸屏设备上按下相同的弹出框。

来源

2016-05-10 Danny Shepherd

我不会介意，但没有怎么办？（改变：激活，：焦点，变化幅度以DIV），甚至可以让工具提示出现在我的任何iOS设备，点击它什么都不做。 –

是的，有一种方法。

首先：将属性“ontouchstart”添加到您的按钮。其次：为以下项添加样式：活动，：焦点和：悬停。

我已经在iOS上测试过它，它工作。（没有尝试过与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>

这样做是将 tabindex属性添加到您的 .tiptext元素，给它的 -1值

来源

2016-05-10 23:18:34 haltersweb

也适用于Android！ – JakobMillah

嗨@haltersweb只是试图把它翻译成我的代码 - 因为我没有一个按钮，而且有一个浮动的工具提示，而不是 - 在我的记录是“按钮”将成为我的工具提示标题？我可以添加'ontouchstart'到一个跨度吗？ –

好吧，我已经重写了我的原始代码来实现这一点，除了移动设备上的工具提示的样式，我正在努力（见[链接]（http://stackoverflow.com/questions/37159636/）制作工具提示 - 浮动和填充 - 移动屏幕上半部分）它的工作原理我唯一的问题是，现在在桌面上，您可以在工具提示框中突出显示桌面或将鼠标悬停在桌面上因为只要你将鼠标移开，它就会消失，然后将鼠标悬停在该链接上，然后将鼠标悬停在该框上以保持其活动状态。必须进行调整才能启用该功能。 –

的一种方式。这将允许元素获得焦点，因此可以通过:focus伪类进行选择。

你还需要到touchstart事件，以获得iOS的识别:active和:focus伪类添加到您的body标签（或您正在使用的元素的任何父元素）。

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

来源

2016-05-11 08:53:55 Shaggy

我认为这可能已经破解了它，但在iOS上，当你按下它时，跨度仍然没有任何作用。我认为我的原始代码和布局需要四处移动，否则它可能必须有一个空白的'href'才能在移动设备上执行任何操作。 –

尝试将'tabindex'设置为'0'和/或使用'：active'伪类而不是'：focus'来查看它是否有效。但是，请注意，将tabindex设置为0会强制您的'.tiptext'元素成为用TAB键遍历页面时首先关注的元素。 – Shaggy

从@haltersweb中添加“ontouchstart”似乎已经完成了这一诀窍 - 现在只需将这些框设置为移动设备即可。 –

我的工具提示可以适用于触摸屏吗？

回答

相关问题