1

我有以下工具提示：

.tooltip {
  position: relative;
  margin-bottom: 0.5em;
  padding: 10px 10px;
  border-radius: 5px;
  bottom: 100%;
  min-width: 10em;
  width: 25%;
  font-size: 12px;
  line-height: 15px;
  font-size: 0.75rem;
  line-height: 0.9375rem;
}

完整代码可在此处获得：

http://jsbin.com/aqewiv/2/edit

我在将工具提示的插入符号放在框的中心时遇到了很多麻烦。如果您查看右侧的框（“测试数据 2”），它会在框的中心显示插入符号，这就是我想要的。但是，如果您查看左侧框（“测试数据 1”），插入符号会移动到底部。有没有一种方法可以让我始终将插入符号定位在中心，即使盒子更大？

4

4 回答 4

2

为了这。您可以在 .test-box DEMO HERE添加 ":after"

.test-box:hover:after {
content: "";
display: block;
height: 1em;
width: 1em;
right: -0.6em;
margin-left: 0;
margin-top: -0.5em;
background: #FFF;
position: absolute;
top: 50%;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-left: 2px solid #D9D9D9;
border-bottom: 2px solid #D9D9D9;
z-index: 10000;
}
于 2013-07-25T17:15:18.597 回答
0

三角形定义为

.tooltip-left::after, .tooltip-right::after { 
margin-top: -0.5em;
position: absolute;
top: 50%;

如果您知道测试数据框高度，则可以动态分配它（jquery），也许您会很好 

top: 50px;

也。

于 2013-07-25T17:06:42.187 回答
0

您需要使用 Javascript 获取高度，除以 2 以找到中心，然后将工具提示的顶部设置为该值。这样的事情应该这样做：

$(document).ready(function(){
    $(".tooltip").each(function (){
        var center = $(this).parent().height() / 2;
        $(this).after(" ").css("top", center);
    });
});
于 2013-07-25T17:14:38.830 回答
0

只需使用 css：

.tooltip-left:after,.tooltip-right:after { top : 100px !important}
于 2013-07-25T17:29:04.790 回答