Question

我有以下工具提示：

.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'），插入符号就会移到底部。有没有办法让alwyas将插座放在中心，即使箱子更大？

Answer 1

为此。您可以添加＆＃34;：＆＃34;到.test-box DEMO HERE

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

Answer 2

三角形定义为

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

如果你知道测试数据框的高度，你可以动态地对它进行分配（jquery）或者你可能没事了

top: 50px;

太

Answer 3

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

$(document).ready(function(){
    $(".tooltip").each(function (){
        var center = $(this).parent().height() / 2;
        $(this).after(" ").css("top", center);
    });
});

Answer 4

只需使用css：

.tooltip-left:after,.tooltip-right:after { top : 100px !important}

在中心位置工具提示插入符号

4 个答案: