純CSS提示框(tooltip, 工具提示) - MDN網頁範例
不囉唆，先看範例demo，把滑鼠移到藍色底線字上：
這是一個tooltip提示框範例
我把MDN網頁範例 [1] 改寫的更簡單一點。 程式原始碼如下：
HTML程式碼 ：
這是一個<span data-descr="大家好，我是提示">tooltip提示框</span>範例
CSS程式碼 ：
span[data-descr] {
position: relative;
text-decoration: underline;
color: blue;
cursor: help;
}
span[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 1.25em;
background-color: yellow;
border: 1px gray solid;
border-radius: 3px;
padding: 3px;
}
簡單解釋，就是利用 ::after 偽元素(pseudo-element) 結合CSS的 attr() 表達式 來製造一個tooltip提示框。 有興趣的話，順著我提供的連結(英文)往下看，不然就把程式碼拿去照著改一改就好！ 希望對大家有幫助！
參考：
| [1] | ::after (:after) - CSS | MDN |
| [2] |
| [3] |