工具提示只能在一個文本字段上工作

我有我從另一個網站獲得的以下代碼。我遇到的問題是它只顯示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的知識不知道如何使它，所以它使用CSS我目前的工具提示。

來源

2011-01-23 PHPLOVER

爲什麼你對`'兩個關閉的標籤？每個'`周圍的標記的剩餘部分是什麼樣的？ – Pointy 2011-01-23 16:39:59

嗨，我不確定它基本上是工具提示的代碼，我發佈的代碼是javascript和顯示工具提示的html。除此之外，還有CSS的造型。我在網上找到它。 – PHPLOVER 2011-01-23 16:40:56

取決於您的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，檢查出一些提示插件。

下面是他們的30名單：

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

來源

2011-01-23 16:41:30 user113716

工具提示只能在一個文本字段上工作

回答

相關問題