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
Post a Comment