tooltip 就是當你滑鼠移到一個網頁中的元素上面的時候，會浮現出某些訊息的一個 component。我隨便找了 Bootstrap 的 tooltip 文件，大家可以進去體驗一下。
很多 component library 都有提供 tooltip component，網路上也有很多教學教你做出純 CSS 的 tooltip。但是如果只需要可以顯示訊息，不需要任何其他花樣的話，其實只需要純 HTML 就能做到了。
只要在 HTML 元素加入 title 屬性就可以輕鬆做出一個 tooltip：
<span title="就是本人">就是本人</span>因為它是一種全域屬性，所以你可以在任何 HTML 元素加入 title 屬性。
它通常沒什麼存在感，最有存在感的地方是在 <abbr> 標籤的時候。<abbr> 標籤用於表示一個縮寫，它通常會加 title 屬性，這時候 title 屬性有特別的意義，代表這個縮寫的全名。有這個 title 屬性可以讓人在滑鼠移在這個標籤上方的時候，顯示縮寫的全名。
像是這個：TLB。
像是這個：<abbr title="Translation Lookaside Buffer">TLB</abbr>。事實上這篇文章的日期就有用到 title 屬性，你可以到頁面頂端試試看。文章的發佈日期的這一行放有閱讀時間，如果有更新過的話還會有更新日期，這時候如果再包含時間的話會讓這一行太長，所以用 tooltip 讓有興趣知道的讀者自己開來看是比較好的選擇。我原本以為要使用 tooltip 除了使用現成的 component library 以外，就只能自己照著教學用 HTML 跟 CSS 寫出來。但是其實還有這個簡單的方法，只是我原本一直都沒有發現而已。