如何将工具提示定位在光标上方

Question

我仅在我的新网站项目中实现工具提示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>

感谢您的帮助！

问候，迪伦

Answer 1

锚定标签的第一套 position to 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;
}

JSBIN DEMO

更新

如果要在顶中心显示工具提示框，请将left属性设置为50%，然后将transform: translateX(-50%)：

设置

a.tooltip:hover span {
  /* ... */
  left: 50%;
  -webkit-transform: translateX(-50%);
}

更新的演示

Answer 2

http://jsfiddle.net/fnpk7/

我添加了

a.tooltip span {
    position: relative; display: inline-block;
    margin-top:-120px; margin-left: -100px;
}

Answer 3

检查此http://jsfiddle.net/rpnux/

a.tooltip span {
z-index:10;display:none; padding:14px 20px;position:fixed;
margin:-50px;
width:220px; line-height:17px;
}

或检查此答案html-tooltip相对于鼠标指针