jquery - 将工具提示插入符号置于中心

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”)，插入符号会移至底部。有没有一种方法可以让我始终将插入符号定位在中心，即使盒子更大？

Answer 1

为此。您可以将“:after”添加到 .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;
}