光標描述文本框

我已經搜索了很多，並且找不到在光標旁邊創建小文本框的方法，此時將鼠標懸停在HTML對象上。光標描述文本框

你可以看到光標是不可見在這個例子中，但懸停在出現在文本框中。我想創造一些類似的東西。

示例取自Facebook。

感謝您的幫助

2012-06-15 guyzyl

這通常會使用JavaScript來完成。它被稱爲「工具提示」。就像這樣：http://jquery.bassistance.de/ –

首先，感謝您的快速反應，這就是我一直在尋找的。你能告訴我我是如何創建一個非常簡單的？（使用javascript） – guyzyl

提示可以在標籤上添加title賦予他們獲得，例如：可以使用JavaScript來獲得

<a href="#" title="my tooltip">my link</a>

票友看提示，但上面是正確的語義選項（許多工具提示插件希望它在你的代碼中）

2012-06-15 10:05:51 Luca

這可以在一個img元素上完成嗎？ – guyzyl

您應該使用img元素 – Luca

上的「alt」屬性，謝謝！那就是我需要的 – guyzyl

它被稱爲工具提示。這樣寫，例如：

<div class="parent"> 
<p>create group</p> 
<div class="tooltip">tooltip</div> 
</div>

CSS

.tooltip{ 
display:none; 
} 
.parent:hover .tooltip{display:block;}

2012-06-15 10:09:19 sandeep

這不是語義上有效的，不可訪問（屏幕閱讀器），需要進一步的樣式來看起來像一個工具提示... – Luca

誰說它不是語義。有幾種類型的工具提示。 – sandeep

您正在將文本內容添加到與它應該關聯的元素無關的元素。這對屏幕閱讀器沒有意義，因爲您正在設置display：none;到它。基本上你所做的並不是一個工具提示，它只是在瀏覽器上「看起來像」。語義上有效的工具提示應位於標記的標題屬性中。 http://aninnovativeweb.tumblr.com/post/820491172/semantic-tooltips-with-pure-css3-and-html5 – Luca

2012-06-15 10:11:12 Dipak

使用此：