工具提示定位答案

【问题标题】：Tooltip Positioning工具提示定位
【发布时间】：2015-09-24 21:23:36
【问题描述】：

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

谁能帮我解决这个问题？

提前致谢。

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;

请看下面的截图。

【问题讨论】：

你能在 JSFiddle 上发布一个工作示例吗？ jsfiddle.net
OT：如果您经常使用该元素并且在一个页面上不止一次使用该元素，您还应该考虑将 ID 选择器更改为类选择器。

标签： css tooltip positioning

【解决方案1】：

我在网上找到了一个更好的工具。

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

再次感谢各位。 :)

【讨论】：

【解决方案2】：

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

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

谢谢。

【讨论】：