javascript - 工具提示仅适用于一个文本字段

Question

我有从另一个网站获得的以下代码。我遇到的问题是它只显示第一个文本字段的 onclick。所有其他文本字段都不起作用。

我没有费心发布 CSS，因为我相信不需要修复。

基本上要显示文本字段，我必须将以下代码放在每个文本字段的正下方

<span class="hint">This is a hint">&nbsp;</span></span>

这是 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);

我喜欢这个工具提示，因为它正是我想要的，因为它显示了 < (横向三 Angular 形)，因此它指向选定的文本框。

我正在考虑使用 jQuery，但由于我不了解 JS/jQuery，因此不确定如何制作它，因此它使用我当前用于工具提示的 CSS。

Answer 1

取决于您的 HTML 标记。每个跨度/输入对必须位于其自己的容器中。

示例: http://jsfiddle.net/E7ZME/

<div><input><span class="hint">This is a hint"&nbsp;</span></div>
<div><input><span class="hint">This is a hint"&nbsp;</span></div>
<div><input><span class="hint">This is a hint"&nbsp;</span></div>

我没有更改您发布的任何 JavaScript。我只使用了这个 HTML 和一点 CSS。

编辑:

如果您要使用 jQuery，请查看一些工具提示插件。

• http://flowplayer.org/tools/tooltip/index.html
• http://jquery.bassistance.de/tooltip/demo/

以下是其中 30 个的列表:

• http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/