[英]Tooltip only working on one text field
I have the below code which I got from another website. 我有以下代码是从另一个网站获得的。 The problem I am having is it is only displaying onclick of the first text field.
我遇到的问题是它仅显示第一个文本字段的onclick。 All other textfields it does not work.
所有其他文本字段均不起作用。
I have not bothered posting the CSS as not needed to fix I believe. 我没有为不需要修复而烦恼发布CSS。
Basically to display a text field I have to place the below code right underneath each textfield 基本上要显示一个文本字段,我必须将以下代码放在每个文本字段的正下方
<span class="hint">This is a hint"> </span></span>
Here is the JavaScript: 这是JavaScript:
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);
I like the tooltip as it's exactly what I wanted as it shows a <
(sideways triangle) so it points to the textbox that is selected. 我喜欢工具提示,因为它正是我想要的,因为它显示了
<
(横向三角形),因此它指向所选的文本框。
I was thinking of maybe using jQuery but as I don't have knowledge of JS/jQuery not sure how I would make it so it uses the CSS I currently have for the tooltip. 我当时在考虑使用jQuery,但由于我不了解JS / jQuery,因此不确定如何使用jQuery / jQuery,因此它会使用我目前在工具提示中使用的CSS。
Depends on your HTML markup. 取决于您的HTML标记。 Each span/input pair must be in its own container.
每个跨度/输入对必须位于其自己的容器中。
Example: http://jsfiddle.net/E7ZME/ 示例: http : //jsfiddle.net/E7ZME/
<div><input><span class="hint">This is a hint" </span></div>
<div><input><span class="hint">This is a hint" </span></div>
<div><input><span class="hint">This is a hint" </span></div>
I didn't change any of the javascript you posted. 我没有更改您发布的任何JavaScript。 I only used this HTML, and a little CSS.
我只使用了此HTML和一些CSS。
EDIT: 编辑:
If you're going to use jQuery, check out some of the tooltip plugins. 如果您要使用jQuery,请查看一些工具提示插件。
Here's a list of 30 of them: 以下是其中的30个列表:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.