工具提示幫助匹配

我希望有人可以提供幫助，但我試圖使用qTip2來顯示幫助文本，當用戶將鼠標懸停在我的網頁上的我的helpicon3圖標旁邊的三個輸入文本項目上時。工具提示幫助匹配

僅供參考，我創建的每個項目，我已經預先指定的，我想，當用戶將鼠標懸停在helpicon 該輸入項，顯示該項目的提示文本，即：

<span class="itemToolTip" foritem="P35_TEST">This is some help text from the help section of the item.</span> 
<span class="itemToolTip" foritem="P35_A1">This is some help text for A1 item</span> 
<span class="itemToolTip" foritem="P35_B1">This is some help text for B1 item</span>

o基於此，當我將鼠標懸停在「P35_A1」helpicon上時，使用qTip2，我會看到工具提示文本「這是A1項目的一些幫助文本」。

這同樣適用於其他兩個項目。

這種情況的代碼，這是我從我的觀點我的網頁源拉到看起來是這樣的：

<label for="P35_TEST"></label> 
<td colspan="1" rowspan="1" align="left"><input type="text" name="p_t04" size="30" maxlength="2000" value="" id="P35_TEST" /><td colspan="1" rowspan="1" align="top"><div id="helpicon"><img src="helpIcon3" border="0" alt="" style="cursor:normal" /></div></td> 
<label for="P35_A1"></label> 
<td colspan="1" rowspan="1" align="left"><input type="text" name="p_t05" size="30" maxlength="2000" value="" id="P35_A1" /><td colspan="1" rowspan="1" align="top"><div id="helpicon"><img src="helpIcon3" border="0" alt="" style="cursor:normal" /></div></td> 
<label for="P35_B1"></label> 
<td colspan="1" rowspan="1" align="left"><input type="text" name="p_t06" size="30" maxlength="2000" value="" id="P35_B1" /><td colspan="1" rowspan="1" align="top"><div id="helpicon"><img src="helpIcon3" border="0" alt="" style="cursor:normal" /></div></td>

現在有了qTip2，我有和沒有工作的jQuery代碼如下。

很明顯，這是我遇到的問題的上下文文本部分，因爲我正在嘗試使用.each函數匹配項目幫助圖標I 上面懸停着itemtooltip foritem幫助出現在我的工具提示中。

$(document).ready(function() { 
    $('span.itemToolTip').each(function(i){ 
    $('#helpicon').qtip({ 
     content: { 
      text: $('label[for="' + $(this).attr('foritem') + '"]').attr('title',$(this).html()) 
     }, 
     style: { 
      classes: 'ui-tooltip-dark ui-tooltip-rounded', 
      height: 5, 
      width: 100 
     }, 
     position: { 
      my: 'bottom center', 
      at: 'top center', 
      viewport: $(window) 
     } 
    }); 
    }); 
});

再次，如果我將鼠標懸停在「P35_TEST」 helpicon，使用qTip2，我會看到提示文本「這是從項目的幫助部分幫助文本。」

希望有人可以幫助匹配標籤helpicon到實際的工具提示文本。

此外，如果人們也許可以提供另一種也利用qTip2的手段，那也是值得讚賞的。

謝謝。

來源

2011-09-05 tonyf

您不應該有多個具有相同ID的元素。 '$（'＃helpicon'）'應該只匹配整個頁面中完全相同的一個元素。 –

一對夫婦的事情要考慮：

你的DIV都具有相同的ID，這是無效的標記。
您應該切換小費處理的順序。換句話說，在修正了DIV ID問題之後，您應該針對工具條觸發器而不是工具提示內容持有者進行循環。

我實際上已經彙集了一個例子，說明如何去做你之前描述的內容，並在qTip2論壇上發佈關於它的文章this thread。第二個鏈接顯示究竟是如何做到你的要求：

Use tootip content from a unique, hidden DIV element on the page, with an ID attribute based on the trigger's

HTML：

<ul> 
    <li><a id="tooltip_1" href="#" class="tooltip" >Trigger1</a><li> 
    <li><a id="tooltip_2" href="#" class="tooltip" >Trigger2</a><li> 
    <li><a id="tooltip_3" href="#" class="tooltip" >Trigger3</a><li> 
</ul> 

<div style="display: none;"> 
    <div id="data_tooltip_1"> 
     data_tooltip_1: You can hover over and interacte with me 
    </div> 
    <div id="data_tooltip_2"> 
     data_tooltip_2: You can hover over and interacte with me 
    </div> 
    <div id="data_tooltip_3"> 
     data_tooltip_3: You can hover over and interacte with me 
    </div> 
</div>

的Javascript：

$(document).ready(function() { 
    $('.tooltip[id^="tooltip_"]').each(function(){ 
     $(this).qtip({ 
      content: $('#data_' + $(this).attr('id')), 
       show: { 
      }, 
      hide: { 
       fixed: true, 
       delay: 180 
      } 
     }); 
    }); 
});

這裏的關鍵是使用的命名你的元素。每個ID都有一個標準前綴「tooltip_」和「data_tooltip_」，後跟一個唯一的數字ID。然後，在選擇器中，我們專門查找具有關聯前綴的元素。

來源

2011-09-06 20:38:02 kiddailey

就是我之後的事情。這一切都很有用。謝謝。 – tonyf

由於某種原因，我將這個qTip代碼移動到另一個頁面，現在我得到一個Uncaught TypeError：Object [object Object]沒有方法'qtip'。我在這裏實際上提出了另一個問題。希望你能協助。謝謝。 – tonyf

聽起來像你有一個JS庫包含問題。檢查您的

爲什麼你不只是要顯示爲您的每一個幫助圖標的title屬性，然後做（假設每個「helpicon」具有類helpicon）（未測試）

文本

$(document).ready(function() { 
    $('.helpicon').each(function(i){ 
     $(this).qtip({ 
      content: { 
       text: $(this).attr('title') 
      }, 
      style: { 
       classes: 'ui-tooltip-dark ui-tooltip-rounded', 
       height: 5, 
       width: 100 
      }, 
      position: { 
       my: 'bottom center', 
       at: 'top center', 
       viewport: $(window) 
      } 
     }); 
    }); 
});

來源

2011-09-05 06:28:34

感謝您的幫助，但這不完全是我想要這樣做的方式。僅供參考，我從每個輸入類型文本字段名稱（即this.id）標識的數據庫表中動態檢索我的工具提示文本。我後來的最終結果是，當我將鼠標懸停在輸入字段上時，即id =「P35_TEST」 - 我想將此ID與我的數據庫表匹配，並檢索這些ID匹配的幫助文本。上面我的問題中描述的其他兩個項目也是如此。謝謝。 – tonyf

相關問題

工具提示幫助匹配

回答

相關問題