關閉css touchdevises上的工具提示

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

我沒有問題，如u describet但我tryed這和它的作品甚至更好我的設備上。所以檢查它可以幫助你。

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