Question

我为我的新网站项目创建了一个仅限CSS的工具提示。此工具提示在touchdevises上显示。唯一的问题是touchdevises无法关闭工具提示。

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

我只想尽可能使用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;
}

关闭touchdevises上的css工具提示

1 个答案: