css - 关闭触摸设备上的 CSS 工具提示

Question

我正在为我的新网站元素创建一个纯 CSS 工具提示。 此工具提示显示在触摸设备上。唯一的问题是触摸设备无法关闭工具提示。

如何修改触摸屏用户在触摸工具提示周围某处时可以关闭工具提示的代码？或者如果他们触摸工具提示可见文本链接？

我只想尽可能使用 css。

我拥有的 CSS:

a.tooltip {outline:none;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none; cursor: help;} 
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:220px; line-height:17px;
}

a.tooltip:hover span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}

/*CSS3 extras*/
a.tooltip span
{
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

-moz-box-shadow: 1px 1px 8px #CCC;
-webkit-box-shadow: 1px 1px 8px #CCC;
box-shadow: 1px 1px 8px #CCC;
}

这是 html:

<a href="#" class="tooltip">Normal Text<span><strong>Tooltip title</strong><br />This would be the content of the tooltip.</span></a>

谢谢大家帮帮我!

问候，迪伦

Answer 1

我没有遇到你描述的问题，但我试过了，它在我的设备上运行得更好。所以检查它对你有帮助。

Fiddle

HTML:

<a href="#" class="tooltip">
    Normal Text
</a>    
<span>
    <strong>Tooltip title</strong><br />
    This would be the content of the tooltip.
</span>

CSS:

a.tooltip {
    outline:none;
}

a.tooltip strong {
    line-height:30px;
}

a.tooltip:hover {
    text-decoration:none;
    cursor: help;
} 

span {
    z-index:10;display:none; 
    padding:14px 20px;
    margin-top:-30px; 
    margin-left:28px;
    width:220px; 
    line-height:17px;
}

a.tooltip:hover + span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}

/*CSS3 extras*/
span {
    border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 1px 1px 8px #CCC;
    -webkit-box-shadow: 1px 1px 8px #CCC;
    box-shadow: 1px 1px 8px #CCC;
}