I have been working on an error tooltip that appears when the user hovers over an input field. The tooltip is almost finished, but I am having trouble aligning it vertically with the input field. I have tried multiple solutions without success.
input {
height: 30px;
width: 278px;
}
/* Error Validations css */
.error-field {
position: relative;
overflow: visible;
display: inline-block;
}
.error-field > input:focus {
background-color: white;
outline: none;
}
.error-field > input {
background-color: #ffdedf;
border: 1px solid red !important;
border-radius: 3px;
}
.error-field:hover {
/* IE Fix */
}
.error-field:hover:after {
content: attr(data-error);
display: inline-block;
vertical-align: middle;
padding: 3px;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 1;
display: block;
background-color: #ffdd67;
left:100%;
width: 200px;
line-height: 15px;
border: 1px solid #b07317;
margin-left: 15px;
border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
I am attempting to achieve this without using Javascript or Prototype, but I am open to it if necessary.
The browsers I need to support are IE9, Chrome, and Firefox.
Any assistance would be greatly appreciated.