3

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

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

我也不能为此使用任何外部库，这使它变得更加困难。我只被允许使用纯 JS（或编译成纯 JS 的语言，例如 TypeScript）。

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

谢谢

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

4

2 回答 2

3

这样的事情可能会帮助你：

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 绑定focus和blur事件——这比把它们放在 HTML 中要好。

于 2012-10-29T07:01:23.087 回答
1

您可以通过多种方式使用“CSS 工具提示”。一个相对简单的想法是将提示内容放在div字段之前，最初用 CSS 隐藏。然后，您需要一个onfocus将其更改为可见的事件处理程序div（以及一个onblur使其再次不可见的处理程序）。您将有一个用于提示和字段的容器，并将该容器声明为相对位置，以便可以“绝对”定位提示（即相对于容器）。

示例（jsfiddle）：

<!DOCTYPE HTML>
<meta charset=utf-8>
<style>
.textfield {
  position: relative;
}
.textfield .hint {
  display: none;
  position: absolute;
  width: 10em;
  bottom: 1.3em;
  background: #ff9;
  padding: 0 0.2em;
  border: solid 1px;
}
</style>
<script>
function hint(elem) {
  elem.parentNode.firstElementChild.style.display = 'block';
}
function unhint(elem) {
  elem.parentNode.firstElementChild.style.display = 'none';
}
</script>
<p>This is just some filler text.
<table>
<tr>
  <td><label for=bar>Bar</label>
  <td>
  <div class=textfield>
  <div class=hint>This is hint text for the Bar field.</div>
  <input id=bar name=bar onfocus="hint(this)" onblur="unhint(this)">
  </div>
<tr>
  <td><label for=foo>Foo</label>
  <td>
  <div class=textfield>
  <div class=hint>This is hint text for the Bar field.</div>
  <input id=foo name=foo onfocus="hint(this)" onblur="unhint(this)">
  </div>
</table>

（当使用表格来结构化您的表单时，在这种方法中，您需要记住 CSS 定位不适用于表格单元格。这就是为什么您不能将td元素用作包装器但需要在div其中使用的原因。）

于 2012-10-29T07:28:27.033 回答