2

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?

newbie
  • 1,023
  • 20
  • 46
  • it is centered according to the tooltip height, that's why it seems to be centered at the 2nd div, as it is smaller – dsuess Jul 25 '13 at 17:03
  • You will need to use JavaScript for this. You will have to get the height of the hovered div, and then use that to set the `top` of your caret – Chris Rockwell Jul 25 '13 at 17:07
  • I see all the answers, but I'm assuming you want something a bit more dynamic, almost like what @Jonny has done. However, I can't figure out how to target the `:after` virtual element with jQuery – Chris Rockwell Jul 25 '13 at 17:30
  • I agree. I am trying to modify Jonny's code and see if I can come up with something – newbie Jul 25 '13 at 18:49

4 Answers4

3

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;
}
OnengLar
  • 898
  • 1
  • 12
  • 23
0

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.

dsuess
  • 5,219
  • 2
  • 22
  • 22
0

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);
    });
});
Jonny Sooter
  • 2,417
  • 1
  • 24
  • 40
0

Just do with css:

.tooltip-left:after,.tooltip-right:after { top : 100px !important}
YashPatel
  • 295
  • 1
  • 2
  • 9