我仅在我的新网站项目中实现了工具提示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 that I want to show up above the cursor.</span></a>
谢谢你们帮我！
问候，迪伦
第一组position锚定标记，relative用于将其设置为已absolute定位子项的参考点。
然后使用以下CSS声明：
a.tooltip span {
z-index:10;
display:none;
padding:14px 20px;
width:220px;
line-height:17px;
}
a.tooltip:hover span {
display:block;
position:absolute;
bottom: 2em; /* Use a relative unit to increase the capability */
left: 0;
color:#373535;
border:2px solid #D3D3D3;
background:#fffFff;
}
如果要在顶部中心显示工具提示框，请将left属性设置为50%then transform: translateX(-50%)：
a.tooltip:hover span {
/* ... */
left: 50%;
-webkit-transform: translateX(-50%);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句