Подсказка работает только с одним текстовым полем

Question

У меня есть код ниже, который я получил с другого сайта.Проблема у меня заключается в том, что он отображает только щелчок по первому текстовому полю.Все остальные текстовые поля не работают.

Я не удосужился опубликовать 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, я не уверен, как бы я это сделал, чтобы он использовал CSS, который у меня есть для всплывающей подсказки.

Answer 1

Зависит от вашей разметки HTML.Каждая пара span / input должна быть в своем собственном контейнере.

Пример: 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/