放置圖標以顯示文字onmouseover

Question

我開發了一個電子商務網站。對於用戶表單輸入框，我想將一個問號圖標作爲幫助工具。當用戶將鼠標放在該圖標上時，它應顯示幫助文本。我沒有得到如何去做。請有人幫我做這件事。

感謝

Answer 1

你可以把一個div是隱藏的，並顯示在鼠標懸停。如果您正在尋找可以使用Qtip一些很酷的工具提示..

$(document).ready(function() 
{ 
    $('img[title]').qtip({ 
     content: { 
     text: false // Use each elements title attribute 
     }, 
     style: 'cream' // Give it some style 
    }); 
}); 

Answer 2

這裏是一個爲你的想法。 http://jquerytools.org/demos/tooltip/index.html

Answer 3

做search for JQuery tooltips真的很有幫助。

我發現這一點：http://vadikom.com/demos/poshytip/

你可以使用它像這樣：

$('#my-html-element').poshytip(); 

如果用class和id註釋你的圖標，上面的調用是所有你需要。

它也支持表單元素輸入框是這樣的：

$('#demo-form-name').poshytip({ 
    className: 'tip-yellowsimple', 
    showOn: 'focus', 
    alignTo: 'target', 
    alignX: 'right', 
    alignY: 'center', 
    offsetX: 5 
});