typescript 如何在用户键入时显示提示框或工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13116972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I display a Hint box or Tooltip while the user is typing?
提问by Arrow
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 属性，但是这个工具提示需要的不仅仅是文本，而且需要更大并直接位于文本框上方。
采纳答案by Ian
Something like this might help you:
像这样的事情可能会帮助你：
<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 focusand blurevents with Javascript - it would be better than putting them in the HTML.
这显然是非常狭隘的，需要修改以完全适合您的需要。我没有费心用 Javascript绑定focus和blur事件 - 这比将它们放在 HTML 中要好。
回答by Jukka K. Korpela
You can use “CSS tooltips” in many ways. A relatively simple idea is to place the hint content in a div, initially hidden with CSS, right before the field. Then you need an onfocusevent handler that changes that divto visible (and an onblurhandler that makes it invisible again). 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).
您可以通过多种方式使用“CSS 工具提示”。一个相对简单的想法是将提示内容放在一个div，最初用 CSS 隐藏，就在字段之前。然后您需要一个将onfocus其更改div为可见的事件处理程序（以及一个onblur使其再次不可见的处理程序）。您将有一个用于提示和字段的容器，并将该容器声明为相对位置，以便可以“绝对”定位提示（即相对于容器）。
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 tdelement as wrapper but need to use divinside it.)
（当使用表格来构造表单时，在这种方法中，您需要记住 CSS 定位不适用于表格单元格。这就是为什么您不能将td元素用作包装器而需要在其中使用的div原因。）
