数据在同一行后的绝对位置

Question

我正在尝试在输入框之后添加自定义工具提示，我让它工作正常，除了我提交表单和错误显示。出于某种原因，工具提示会阻止错误文本。这很奇怪，我现在已经把我的大脑弄得太久了。想知道它。

Here是相关网页。

我只有前四个输入的工具提示。它们工作正常，直到您提交显示错误的表单。单击“提交”以查看奇怪的行为。

最终目标是将工具提示显示在错误文本上，然后消失并在选项卡返回/单击到另一个字段时显示错误文本。

有什么想法吗？

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function prepareInputsForHints() {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        // test to see if the hint span exists first
        if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
            // the span exists!  on focus, show the hint
            inputs[i].onfocus = function() {
                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
            }
            // when the cursor moves away from the field, hide the hint
            inputs[i].onblur = function() {
                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
            }
        }
    }
    // repeat the same tests as above for selects
    var selects = document.getElementsByTagName("select");
    for (var k = 0; k < selects.length; k++) {
        if (selects[k].parentNode.getElementsByTagName("span")[0]) {
            selects[k].onfocus = function() {
                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
            }
            selects[k].onblur = function() {
                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
            }
        }
    }
}
addLoadEvent(prepareInputsForHints);

以下是error类和hint类的CSS：

.error {
    margin-left:5px;
    font-size:.75em;
    font-weight:bold;
    width:80px;
    color:#FF0000;
}

.hint {
    display:none;
    position:absolute;
    left:650px;
    width:200px;
    margin-top:-4px;
    border:1px solid #c93;
    padding:1.5px 10px 1.5px 10px;
        /* to fix IE6, I can't just declare a background-color,
        I must do a bg image, too!  So I'm duplicating the pointer.gif
        image, and positioning it so that it doesn't show up
        within the box */
    background:#ffc url(pointer.gif) no-repeat -10px 5px;
    font-weight: normal;
}

/* The pointer image is added by using another span */
.hint .hint-pointer {
    position:absolute;
    left:-10px;
    top:-1px;
    width:10px;
    height:19px;
    background: url(/_images/pointer.gif) left top no-repeat;
}