关闭触摸屏上的css工具提示

我正在为我的新网站项目创建一个css专用工具提示。 此工具提示显示在触摸屏上。唯一的问题是TouchDevices无法关闭工具提示

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

如果可能的话，我只想使用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>

谢谢你们帮我，伙计们

---

关于Dylan，正如你所说，我没有遇到任何问题，但我尝试过，它在我的设备上运行得更好。所以，检查一下它对你有帮助

HTML:

---

谢谢你的帮助。我用了你的密码。但是有些文字会被破坏。。您可以查看touch Desive上此链接下的工具提示：当然，您需要根据自己的需要进行更改。我所做的只是将跨度从标记中移出。然后用+选择它，这意味着前一个元素将在悬停后立即激活它…哦，我明白了！我试试看。谢谢我不确定您是否可以删除a的href auto或替换它，因为页面将始终跳转或使用目标修复。。。（发生在我的手机上）

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

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