javascript - 如何在用户输入时显示提示框或工具提示？

Question

我的页面上有大约 1000 个文本字段，需要在用户当前输入的文本字段上方显示工具提示。

这听起来很简单，但我很难弄清楚如何将它显示在页面上其他所有内容的顶部并且不会中断文档的流动。

我也不能为此使用任何外部库，这使它变得有点困难。我只允许使用纯 JS(或编译为纯 JS 的语言，例如 TypeScript)。

有没有人有任何链接、教程或类似的东西？这将非常有帮助。

谢谢

编辑: 我知道您可以在元素上使用 Title 属性，但是此工具提示需要的不仅仅是其中的文本，还需要更大并直接位于文本框上方。

Answer 1

这样的事情可能对你有帮助:

http://jsfiddle.net/ysuw5/

<div id="container">
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf" /><br />
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf2" /><br />
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf3" /><br />
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf4" /><br />

    <div id="tooltip"></div>
</div>

function theFocus(obj) {
    var tooltip = document.getElementById("tooltip");
    tooltip.innerHTML = obj.title;
    tooltip.style.display = "block";
    tooltip.style.top = obj.offsetTop - tooltip.offsetHeight + "px";
    tooltip.style.left = obj.offsetLeft + "px";
}

function theBlur(obj) {
    var tooltip = document.getElementById("tooltip");
    tooltip.style.display = "none";
    tooltip.style.top = "-9999px";
    tooltip.style.left = "-9999px";
}

这显然是非常狭隘的，需要修改以完全满足您的需要。我没有费心用 Javascript 绑定(bind) focus 和 blur 事件——这比将它们放在 HTML 中要好。