HINT.css 是一個使用 CSS3 與 HTML5 實作的 tooltip 函式庫，可以在網頁中呈現漂亮的提示訊息方塊。

一般在網頁中若要顯示提示訊息，可以使用 title 這個 HTML 屬性，像上面這張圖將 title 設定為 "HTML.css Logo"，所以當你將滑鼠移到圖片上面時，停留一段時間他就會顯示這行提示訊息。


雖然 title 已經可以讓你為網頁的元素加上文字的訊息，但是設計者無法控制它顯示的方式，而且不同的瀏覽器也會有一些差異。

HINT.css 是一個只使用 CSS3 與 HTML5 實作的 tooltip 函式庫，完全沒有用到 JavaScript，所以對於瀏覽器不會有太大的負擔。以下介紹如何使用 HINT.css 在網頁中加入 tooltip。

首先從 GibHub 下載 hint.css 這個檔案（或是 hint.min.css 也可以），並在網頁中引入這個檔案：

<link rel="stylesheet" href="hint.css">

接著依照想要顯示提示方塊的位置，選擇下面其中一個 CSS class，加在在網頁中需要顯示提示訊息方塊的元素上：

  • hint--top
  • hint--bottom
  • hint--left
  • hint--right

例如：

這是一般文字，<span class="hint--bottom">這裡會顯示提示訊息。</span>

然後還要使用 data-hint 屬性加上想要顯示的訊息內容：

這是一般文字，<span class="hint--bottom" data-hint="這是提示訊息內容">這裡會顯示提示訊息。</span>

這樣就完成了，下面這個是實際的示範效果：

這是一般文字，這裡會顯示提示訊息。

將滑鼠移到上面，就會顯示出提示訊息方塊。

下面這些是一些附加的 CSS modifiers，可以任意組合使用：

  • hint--error
  • hint--info
  • hint--warning
  • hint--success
  • hint--always
  • hint--rounded
  • hint--bounce

這些 modifiers 的作用應該看名稱就知道了，例如顯示錯誤的訊息，並顯示圓弧狀的方塊：

這是一般文字，<span class="hint--bottom hint--error hint--rounded" data-hint="這是提示訊息內容">這裡會顯示提示訊息。</span>

結果為

這是一般文字，這裡會顯示提示訊息。