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

我有以下工具提示：

.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”），则插入符号会移到底部。
即使箱子较大，有没有办法我可以将插入符号定位在中央？

最佳答案

为了这。您可以在.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;
}

关于jquery - 将工具提示插入符置于中心，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17864200/