Instead of a negative margin-top
use a negative translateY
(supported also on IE9)
http://jsfiddle.net/x9uW5/1/
.error-field:hover:after {
...
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
This will always ensure a middle alignment, no matter how much text is contained in the tooltip