純css製作的tooltip

這寫法好處是，只要把語法匯入，在該元素直接加上tooltip的class，還有屬性，tooltip=’你想要顯示的文字’，就可以直接套用。
主要是利用Pseudo class跟Pseudo element去自動產生我們要的效果。

利用content:attr(tooltip);來動態擷取在element上的屬性內容，再加上white-space:nowrap;
transform:translateX(-50%);來處理一些定位顯示的問題。

範例如下：