工具提示定位

时间:2014-02-17 17:50:07

标签: css tooltip positioning

我正在尝试将此工具提示中心放在表格列下,但即使我将位置设置为绝对也不起作用,我不想将其设置为固定,因为此工具提示正用于网站上的许多其他链接且相同当我在表格测试中移动鼠标时,它会移动。

任何人都可以帮我这个吗?

提前致谢。

CSS代码。

#dhtmltooltip{
position: absolute;
min-width:50px;
color:#ffffff;
padding: 6px;
background-color: #2588B3;
visibility: hidden;
z-index: 100;
-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border-radius: 10px;

见下面的截图。

enter image description here

2 个答案:

答案 0 :(得分:0)

我在网上找到了更好的tooltop。

.tooltip:hover {text-decoration:none;} 
.tooltip span {
z-index:10;
display:none; 
padding:6px 8px;
margin-top:25px;
width:120px; 
-webkit-border-radius: 8px; 
-moz-border-radius: 8px;
border-radius: 8px;
}

.tooltip:hover span{
display:inline; 
position:absolute;  
color:#EEE;
background:#2588b3;
}

.callout {
z-index:20;
position:absolute;
top:-12px;
left:60px;
}

再次感谢费拉斯。 :)

答案 1 :(得分:0)

您可以定位工具提示中心。 通过在css中使用calc函数来保存css中的属性。 如果您想要位于其他位置,只需根据您的要求更改50%的值。 这是代码

tooltipCss
{
position: absolute;
left: calc(50% - 5px)
}

感谢。