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>

結果為

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