在 codepen 上看到了一個關於 tooltip 簡單又聰明的做法,有用到偽元素跟中括號的選擇器,直接把原作者的原始碼放在底下,真的要我憑空寫還真的寫不出來,覺得好厲害 XD
比較特別的當然就是在按鈕的自定義了一個屬性data-tooltip
,接著在樣式檔中透過一個中括號的選擇器來找到這個特殊屬性,取值的部分是透過 attr(data-tooltip)
來取~
偽元素則是 :before
及 after
透過在 element 的前後透過樣式檔插入元素 XD 其實只是一個是直接打這種透過樣式檔來插入~
Sample Code
1
| <button data-tooltip="內容">按鈕</button>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
|
[data-tooltip] { position: relative; z-index: 2; cursor: pointer; }
[data-tooltip]:before, [data-tooltip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; }
[data-tooltip]:before { position: absolute; top: 0px; left: 160px; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 180px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); text-align: center; font-size: 14px; line-height: 1.2; }
[data-tooltip]:after { position: absolute; top: 5px; left: 75px; margin-left: -5px; width: 0; border-right: 10px solid #000; border-right: 10px solid hsla(0, 0%, 20%, 0.9); border-top: 8px solid transparent; border-bottom: 8px solid transparent; content: " "; font-size: 0; line-height: 0; }
[data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
|
如果是 React 的開發者的話,也推薦下面這個函式庫,可以減少我們很多的開發和維護。
https://github.com/wwayne/react-tooltip
喜歡這篇文章,請幫忙拍拍手喔 🤣