如何在用户键入时显示提示框或工具提示？

Question

I have about 1000 Textfields on our page, and need to display a Tooltip above the textfield that the user is currently typing in. 我的页面上有大约1000个文本字段，需要在用户当前键入的文本字段上方显示工具提示。

It sounds simple, but I'm having difficulty figuring out how to display it on top of everything else on the page and without breaking flow of the document. 这听起来很简单，但我很难弄清楚如何在页面上的其他内容上显示它并且不会破坏文档的流量。

I can't use any external libraries for this either, which makes it a little more difficult. 我也不能使用任何外部库，这使得它更难一点。 I am only allowed to use pure JS (or a language that compiles to pure JS, such as TypeScript). 我只允许使用纯JS（或编译为纯JS的语言，如TypeScript）。

Does anyone have any links, tutorials or anything like that? 有没有人有任何链接，教程或类似的东西？ It would be very helpful. 这将非常有帮助。

Thank you 谢谢

Edit: I am aware that you can use the Title attribute on an element, however this tooltip needs to have more than just text inside it and needs to be bigger and directly above the textbox. 编辑：我知道你可以在元素上使用Title属性，但是这个工具提示需要的不仅仅是文本内部的文本，而是需要更大并且直接在文本框上方。

Answer 1

Something like this might help you: 这样的事情可能对你有所帮助：

http://jsfiddle.net/ysuw5/ 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";
}

This is clearly very narrow-minded and would need to be modified to fit exactly what you need. 这显然是非常狭隘的，需要进行修改以完全符合您的需要。 I didn't bother binding the focus and blur events with Javascript - it would be better than putting them in the HTML. 我没有打扰使用Javascript绑定focus和blur事件 - 这比将它们放在HTML中更好。

Answer 2

You can use “CSS tooltips” in many ways. 您可以通过多种方式使用“CSS工具提示”。 A relatively simple idea is to place the hint content in a div , initially hidden with CSS, right before the field. 一个相对简单的想法是将提示内容放在最初用CSS隐藏的div ，就在字段之前。 Then you need an onfocus event handler that changes that div to visible (and an onblur handler that makes it invisible again). 然后你需要一个onfocus事件处理程序，将div更改为visible（以及一个使其再次不可见的onblur处理程序）。 You would have a container for the hint and the field and declare that container as relatively position, to make it possible to position the hint “absolutely” (that is, relatively to the container). 您将拥有一个提示和字段的容器，并将该容器声明为相对位置，以便可以“绝对”（即相对于容器）定位提示。

Example ( jsfiddle ): 示例（ 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>

(When using a table to structurize your form, in this approach you need to remember that a CSS positioning does not work for table cells. This is why you cannot use the td element as wrapper but need to use div inside it.) （当使用表来构造表单时，在这种方法中你需要记住CSS定位不适用于表格单元。这就是为什么你不能使用td元素作为包装但需要在其中使用div 。）

如何在用户键入时显示提示框或工具提示？

问题描述

2 个解决方案

解决方案1
3 已采纳 2012-10-29 07:01:23

解决方案2
1 2012-10-29 07:28:27

如何在用户键入时显示提示框或工具提示？

问题描述

2 个解决方案

解决方案1 3 已采纳 2012-10-29 07:01:23

解决方案2 1 2012-10-29 07:28:27

解决方案1
3 已采纳 2012-10-29 07:01:23

解决方案2
1 2012-10-29 07:28:27