如何在 html 中的圖標上顯示簡單的工具提示？

Question

我在 Ruby on Rails 應用程序中使用 ActiveScaffold，為了節省表格中的空間，我使用 CSS 用圖標替換了表格中的默認“操作”文本（即“編輯”、“刪除”、“顯示”）。 我還使用 action_link.add（“移動”和“復制”）添加了幾個自定義操作。

為清楚起見，當我將鼠標懸停在圖標上時，我希望彈出一個帶有相關操作（即“編輯”、“復制”）的工具提示。

我以為我可以通過向標簽添加一個簡單的“alt”定義來做到這一點，但這似乎不起作用。

有人可以指出我正確的方向嗎？

Answer 1

在圖像丟失的情況下，或者在純文本瀏覽器中， alt屬性將用作圖像的替代。

IE 弄錯了，當他們將alt顯示為工具提示時。 本來就不是這個意思。

正確的屬性是title ，它當然不會在 IE 中做工具提示。

因此，要在 IE 和 FireFox/Safari/Chrome/Opera 中都顯示工具提示，請同時使用alt屬性和title屬性。

Answer 2

只是要添加到此線程的一個小要點……沒有 alt 標簽或標題標簽。 alt 屬性用於圖像，但頁面上的所有其他元素都可以有一個 title 屬性，這是跨瀏覽器兼容性的最佳選擇。

<span title="Click here to edit the foo">
  Edit
</span>

Answer 3

你想要一個“標題”標簽。 我不確定這是否有必要，但我通常會同時添加 alt 和標題標簽，以確保所有瀏覽器都顯示相同的工具提示。

Answer 4

HTML 中的工具提示是圖像標簽的alt文本的內容，但如果您使用 CSS 設置它，您可能有一個background:url(...); 樣式而不是圖像。

Answer 5

在圖像上使用alt並在鏈接上使用title 。

Answer 6

img 標簽的 alt 屬性適用於某些瀏覽器，但不是所有瀏覽器（例如一些基於 mozilla 的瀏覽器）。

做到這一點的“ 正確方法”是使用 title 屬性。

Answer 7

這里的好工具http://www.guangmingsoft.net/htmlsnapshot/html2image.htm

Answer 8

正如 Prestaul 所指出的，alt 標簽應該適用於圖像和鏈接的標題。 但是，這也取決於瀏覽器……大多數瀏覽器應該實現將元數據顯示為工具提示的功能，但它們不是必需的。

Answer 9

正如 Joel Coehoom 指出的那樣，我意識到我的圖標實際上是一個背景圖像，我創建了一個透明的.gif 圖像，在背景頂部帶有標題和 alt 屬性，瞧——工具提示！

Answer 10

您可以在測試中使用標簽 abbr 和標題屬性，例如<abbr tittle="some text"> </abbr>作為答案https://stackoverflow.com/a/61601175/9442717