Search code examples
jqueryhtmlcssjquery-tooltip

position tooltip caret at the center

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?

Solution

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