一直都是使用 JavaScript 的方式來顯示提示訊息，雖然知道可以用 CSS 來控制，但是覺得很多地方
沒辦法完全配合需求，不過在製作大致的示範樣板，倒是還蠻好用的。
其主要就是利用 position、display 與 hover 來達成想要的效果
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
| .dvmain {
position: relative;
width: 65px;
height: 25px;
}
.dvmain:hover .tooltip {
display: inline-block;
}
.tooltip {
display: none;
position: absolute;
bottom: 30px;
left: 5px;
width: 55px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
color: black;
background: #f7f8f8;
border: 1px solid #c9caca;
border-radius: 0px;
text-shadow: rgba(0, 0, 0, 0.09804) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.09804) 1px 1px 2px 0px;
}
|
以下是在 JsFiddle 的範例