CSS工具提示簡單的文本

我想在網頁中使用的工具提示有以下限制：CSS工具提示簡單的文本

工具提示應該用簡單的文字工作，不僅與錨。
我不想使用JavaScript，只有CSS。
我想讓它至少在Firefox和Internet Explorer中工作。

一個有前途的候選人是埃裏克邁耶的solution，但它使用錨。 Loadaveragezero的solution對簡單文本使用span，但它在Internet Explorer中不起作用。

我正在尋找一個有效代碼示例或帶有上述參數的解決方案的鏈接。

2009-02-17 rics

有什麼不對標題HTML屬性？ – 2009-02-17 16:53:23

這不是很好，很長的評論可能會在某些瀏覽器中被截斷。無論如何，作爲後備，這是確定的。 – rics 2009-02-18 09:41:30

正如其他人所說，你的要求是不現實的。在Javascript可能被禁用的環境中，我通常會使用title屬性來獲取簡單的瀏覽器工具提示作爲後備，然後通過Javascript讀取標題屬性（使用jQuery等框架或者我的個人偏好Mootools來啓用更好的工具提示）。

代碼示例可能是這樣的（使用Mootools和Tips插件）：

<script type="text/javascript"> 
window.addEvent('domready', function() { 
    // Enable the most basic default tooltips 
    var tooltips = new Tips('.tips'); 
} 
</script> 

<p>This is some example text in <abbr class="tips" title="Hypertext Markup Language">HTML</abbr> with some <a href="#" class="tips" title="Tooltips are useful tools">tooltips</a> applied to some of it.</p>

來源

2009-02-17 16:37:16

滿足您所有要求的解決方案是不可能的。 IE對:hover的尊重是有限的 - Eric Meyer的解決方案在IE中工作，因爲它使用錨點。如果你想讓它在任何元素上工作並在IE中工作，你必須使用JS。

來源

2009-02-17 15:58:54

恐怕不能在你的約束範圍內工作。 Internet Explorer 6和以前的僅檢測錨懸停，所以你需要刪除的要求爲它工作，或者：

只有在IE7及更高版本（在這種情況下Loadaveragezero的解決方案將工作）
可以使用錨（在這種情況下，Eric的解決方案將工作）
可以使用JavaScript（在這種情況下，有many ways得到徘徊預IE7）

來源

2009-02-17 15:59:35

CSS工具提示簡單的文本

回答

相關問題