position tooltip caret at the center

Question

I have the following tooltip:

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

Complete code is available here:

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

I am having lot of trouble placing the caret of the tooltip at the center of the box. If you look at the right box ('Test Data 2') it displays the caret at the center of the box which is what I want. But if you look at the left box ('Test data 1') the caret symbol moves to the bottom. Is there a way where I can alwyas position the caret at the center even when the box is bigger?

Answer 1

For this. You can add ":after" to .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

the triangle is defined as

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

If you know the test-data box heigth, you may assiign it dynamically (jquery) oder maybe you will be fine with

top: 50px;

too.

Answer 3

You need to use Javascript to get the height, divide by 2 to find the center, then set the tooltip's top to that value. Something like this should do it:

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

Answer 4

Just do with css:

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