jquery - position tooltip caret at the center -


i have 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 available here:

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

i having lot of trouble placing caret of tooltip @ center of box. if @ right box ('test data 2') displays caret @ center of box want. if @ left box ('test data 1') caret symbol moves bottom. there way can alwyas position caret @ center when box bigger?

for this. can add ":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; } 

Comments

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -