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锚标记设置为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%);
}

<强> Updated Demo

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 position relative to mouse pointer

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

3 个答案:

更新