如何在html中設置alt工具提示？

Question

是否可以爲alt屬性設置工具提示？

我希望爲html alt屬性設置背景，字體顏色等。

任何人都可以幫助我嗎？

Answer 1

您可以通過使用CSS和定位並顯示和隱藏在JavaScript中的div來做到這一點。

這顯示你一種方式。 http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/

Answer 2

你不能設計的默認提示（即造型的alt屬性），但你可以使用JavaScript，CSS和<div>或<span>標籤來創建類似的東西：

http://shurie.com/coder/code_details.asp?codeid=4

或者這些CSS ONLY工具提示：

http://sixrevisions.com/css/css-only-tooltips/

Answer 3

您可以使用新的HTML5 cu自定data-屬性：Semantic Tooltips With Pure CSS3 and HTML5.

Answer 4

語義工具提示使用純CSS3和HTML5

這種技術是如此簡單，我真的很驚訝，沒有人前拿出它，請拍，如果他們有我的鏈接，但我在廣泛的Google操作後找不到任何內容。

目前，大多數人使用像這樣以生產純CSS工具提示：

<a href="#">Title <span>Tooltip</span></a> 

（代碼從CSSGlobe）

但是，這是在我們的另一個HTML元素無關，並不會真正使對屏幕閱讀器來說很有意義，所以讓我們嘗試製作更多的語義解決方案。

看到它在行動

解決之道在於title屬性和CSS的內容屬性。我們可以使用該屬性來動態地將文本插入到CSS中。該HTML是基本的，只要你喜歡：

.tooltip:hover:after { content: attr(title); } 

HTML狗有什麼我們可以用一個列表：

<p>I <span title="I mean really, really" class="tooltip">really</span> like pie.</p> 

使用CSS的內容屬性，我們則跨度像這樣後產生一些內容內容屬性。

當我們將鼠標懸停在範圍上時，我們的工具提示會顯示出來。我們應該讓它更清晰一些。

.tooltip { border-bottom: 1px dotted #333; position: relative; cursor: pointer; } 
.tooltip:hover:after { content: attr(title); position: absolute; white-space: nowrap; background: rgba(0, 0, 0, 0.85); padding: 3px 7px; color: #FFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-left: 7px; margin-top: -3px; } 

展望未來

隨着HTML5終於允許自定義屬性，我們可以讓這個更語義。

<p>I <span data-tooltip="I mean really, really." class="tooltip">really</span> like pie.</p> 

您可以在JavaScript Kit中閱讀關於HTML5自定義屬性的更多信息。

然後，您將需要將CSS更改爲：

.tooltip:hover:after { content: attr(data-tooltip); }