工具提示僅適用於一個文本字段

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

我喜歡工具提示，因為它正是我想要的，因為它顯示了< （橫向三角形），因此它指向所選的文本框。

我當時在考慮使用jQuery，但由於我不了解JS / jQuery，因此不確定如何使用jQuery / 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/