[CSS]不使用 JS 實現可點擊的 Tooltip

效果示意

因為最近在做個人網站

想做漂亮的 RWD 但又想額外開一頁放所有的作品，就有了這個需求
本來想用 bootstrap 提供的 tooltips 但發現不能點擊😭
因此就找了另一個版本使用了

迷之音：這也太奇怪的規劃了吧！！！

....對😥，UX 的規劃確實有點奇怪，如果更好的方式提供給我會很感謝！

那我們就開始吧~

CSS/HTML

tooltip

此 class 請添加至需要效果的父層級

tooltiptext

就輸入需要放置的內容並包 tooltip 內

.tooltiptext::before

這個樣式是為了做出上方的三角形
有關於偽元素更多使用方法，可參考：[CSS]偽元素使用功略

放上後大致上的效果就出來了

由於是綁在父層級的寬度，可能會太小造成換行的問題
這時候可以調整 .tooltiptext 的 width 解決～