Question

我正在创建一个错误工具提示，如果用户将鼠标悬停在输入字段上，该工具提示将会显示。这个工具提示现在几乎完成了我只需要使它相对于输入字段垂直对齐。我尝试了很多方法，但我没能完成。

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。

任何帮助将不胜感激。

Answer 1

使用否定margin-top (supported also on IE9)来代替否定translateY 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%);
}

无论工具提示中包含多少文本

，这都将始终确保中间对齐

无论内容长度如何，始终将错误工具提示保持垂直对齐

1 个答案: