Javascript 无论内容长度如何,始终保持错误工具提示垂直对齐
我正在创建一个错误工具提示,如果用户将鼠标悬停在输入字段上,该提示将可见。这个工具提示现在几乎完成了,我只需要使它与输入字段垂直对齐。我尝试了很多方法,但都没有成功Javascript 无论内容长度如何,始终保持错误工具提示垂直对齐,javascript,html,css,prototypejs,Javascript,Html,Css,Prototypejs,我正在创建一个错误工具提示,如果用户将鼠标悬停在输入字段上,该提示将可见。这个工具提示现在几乎完成了,我只需要使它与输入字段垂直对齐。我尝试了很多方法,但都没有成功 input { height: 30px; width: 278px; } /* Error Validations css */ .error-field { position: relative; overflow: visible; display: inline-block; } .
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;
}
我试图避免使用javascript(或原型),但如果仅仅使用css是不可能的,那么我很乐意使用它
我支持的浏览器有IE9、chrome和firefox
任何帮助都将不胜感激。使用负片
translateY,而不是负片margin top
这将始终确保中间对齐,无论工具提示中包含多少文本更新:删除不必要的css代码。
.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%);
}