Skip to content

Commit 8a18708

Browse files
ogomogom
committed
first commit
0 parents  commit 8a18708

File tree

2 files changed

+333
-0
lines changed

2 files changed

+333
-0
lines changed

‎README.md

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
CSS ToolTip
2+
===========
3+
4+
CSS Only Tooltip. appears blows softly.
5+
Appear in the position of the top and bottom, change the color.
6+
7+
## tag
8+
9+
```html
10+
<div class="tooltip bottom">tooltip
11+
<div class="tooltip-inner">bottom<div class="tooltip-angle"><div class="tooltip-angle-inner"></div></div></div>
12+
</div>
13+
```
14+
15+
## style
16+
17+
```css
18+
.tooltip {
19+
position: relative;
20+
}
21+
22+
.tooltip:hover .tooltip-inner {
23+
visibility: visible;
24+
opacity: .9;
25+
}
26+
27+
.tooltip .tooltip-inner {
28+
position: absolute;
29+
display: block;
30+
text-align: center;
31+
text-decoration: none;
32+
font-weight: bold;
33+
left: 10px;
34+
padding: 4px 6px;
35+
max-width: 200px;
36+
color: #ffffff;
37+
background-color: #444;
38+
border: 2px solid #333;
39+
-webkit-border-radius: 4px;
40+
border-radius: 4px;
41+
visibility: hidden;
42+
opacity: 0;
43+
-webkit-transition: opacity .6s ease-in-out;
44+
z-index: 10;
45+
}
46+
47+
.tooltip.top .tooltip-inner {
48+
bottom: 32px;
49+
}
50+
.tooltip.bottom .tooltip-inner {
51+
margin-top: 8px;
52+
}
53+
54+
.tooltip-angle {
55+
position: absolute;
56+
border-left-width: 0;
57+
line-height: 0;
58+
left: 20%;
59+
}
60+
.tooltip-angle-inner {
61+
position: absolute;
62+
border-left-width: 0;
63+
line-height: 0;
64+
left: 2px;
65+
}
66+
67+
.tooltip.top .tooltip-angle {
68+
bottom: -10px;
69+
border-right: solid 10px transparent;
70+
border-top: solid 10px #333;
71+
}
72+
73+
.tooltip.top .tooltip-angle-inner {
74+
bottom: 5px;
75+
border-right: solid 5px transparent;
76+
border-top: solid 5px #444;
77+
}
78+
79+
.tooltip.bottom .tooltip-angle {
80+
top: -10px;
81+
border-right: solid 10px transparent;
82+
border-bottom: solid 10px #333;
83+
}
84+
85+
.tooltip.bottom .tooltip-angle-inner {
86+
top: 5px;
87+
border-right: solid 5px transparent;
88+
border-bottom: solid 5px #444;
89+
}
90+
```
91+
92+

‎tooltip.html

+241
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>tooltip</title>
5+
<meta charset='utf-8'>
6+
</head>
7+
8+
<style>
9+
/* tooltipz */
10+
.tooltip {
11+
position: relative;
12+
}
13+
14+
.tooltip:hover .tooltip-inner {
15+
visibility: visible;
16+
opacity: .9;
17+
}
18+
19+
.tooltip .tooltip-inner {
20+
position: absolute;
21+
display: block;
22+
text-align: center;
23+
text-decoration: none;
24+
font-weight: bold;
25+
left: 10px;
26+
padding: 4px 6px;
27+
max-width: 200px;
28+
color: #ffffff;
29+
background-color: #444;
30+
border: 2px solid #333;
31+
-webkit-border-radius: 4px;
32+
border-radius: 4px;
33+
visibility: hidden;
34+
opacity: 0;
35+
-webkit-transition: opacity .6s ease-in-out;
36+
z-index: 10;
37+
}
38+
39+
.tooltip.top .tooltip-inner {
40+
bottom: 32px;
41+
}
42+
.tooltip.bottom .tooltip-inner {
43+
margin-top: 8px;
44+
}
45+
46+
.tooltip.blue .tooltip-inner {
47+
background-color: #3A87AD;
48+
border: 2px solid #1F6377;
49+
}
50+
.tooltip.green .tooltip-inner {
51+
background-color: #468847;
52+
border: 2px solid #387038;
53+
}
54+
.tooltip.orange .tooltip-inner {
55+
background-color: #F89406;
56+
border: 2px solid #AD6704;
57+
}
58+
.tooltip.red .tooltip-inner {
59+
background-color: #B94A48;
60+
border: 2px solid #802420;
61+
}
62+
63+
.tooltip-angle {
64+
position: absolute;
65+
border-left-width: 0;
66+
line-height: 0;
67+
left: 20%;
68+
}
69+
.tooltip-angle-inner {
70+
position: absolute;
71+
border-left-width: 0;
72+
line-height: 0;
73+
left: 2px;
74+
}
75+
76+
.tooltip.top .tooltip-angle {
77+
bottom: -10px;
78+
border-right: solid 10px transparent;
79+
border-top: solid 10px #333;
80+
}
81+
.tooltip.top.blue .tooltip-angle {
82+
border-top: solid 10px #1F6377;
83+
}
84+
.tooltip.top.green .tooltip-angle {
85+
border-top: solid 10px #387038;
86+
}
87+
.tooltip.top.orange .tooltip-angle {
88+
border-top: solid 10px #AD6704;
89+
}
90+
.tooltip.top.red .tooltip-angle {
91+
border-top: solid 10px #802420;
92+
}
93+
94+
.tooltip.top .tooltip-angle-inner {
95+
bottom: 5px;
96+
border-right: solid 5px transparent;
97+
border-top: solid 5px #444;
98+
}
99+
.tooltip.top.blue .tooltip-angle-inner {
100+
border-top: solid 5px #3A87AD;
101+
}
102+
.tooltip.top.green .tooltip-angle-inner {
103+
border-top: solid 5px #468847;
104+
}
105+
.tooltip.top.orange .tooltip-angle-inner {
106+
border-top: solid 5px #F89406;
107+
}
108+
.tooltip.top.red .tooltip-angle-inner {
109+
border-top: solid 5px #B94A48;
110+
}
111+
112+
.tooltip.bottom .tooltip-angle {
113+
top: -10px;
114+
border-right: solid 10px transparent;
115+
border-bottom: solid 10px #333;
116+
}
117+
.tooltip.bottom.blue .tooltip-angle {
118+
border-bottom: solid 10px #1F6377;
119+
}
120+
.tooltip.bottom.green .tooltip-angle {
121+
border-bottom: solid 10px #387038;
122+
}
123+
.tooltip.bottom.orange .tooltip-angle {
124+
border-bottom: solid 10px #AD6704;
125+
}
126+
.tooltip.bottom.red .tooltip-angle {
127+
border-bottom: solid 10px #802420;
128+
}
129+
130+
.tooltip.bottom .tooltip-angle-inner {
131+
top: 5px;
132+
border-right: solid 5px transparent;
133+
border-bottom: solid 5px #444;
134+
}
135+
.tooltip.bottom.blue .tooltip-angle-inner {
136+
border-bottom: solid 5px #3A87AD;
137+
}
138+
.tooltip.bottom.green .tooltip-angle-inner {
139+
border-bottom: solid 5px #468847;
140+
}
141+
.tooltip.bottom.orange .tooltip-angle-inner {
142+
border-bottom: solid 5px #F89406;
143+
}
144+
.tooltip.bottom.red .tooltip-angle-inner {
145+
border-bottom: solid 5px #B94A48;
146+
}
147+
148+
.tooltip.tip .tooltip-angle {
149+
left: 10px;
150+
}
151+
152+
table, td, th {
153+
border: 1px solid #ccc;
154+
border-collapse: collapse;
155+
padding: 4px 6px;
156+
}
157+
</style>
158+
159+
<body>
160+
<li>tooltip class example</li>
161+
162+
<table>
163+
<thead>
164+
<tr>
165+
<th>
166+
default
167+
</th>
168+
<th>
169+
blue
170+
</th>
171+
<th>
172+
green
173+
</th>
174+
<th>
175+
orange
176+
</th>
177+
<th>
178+
red
179+
</th>
180+
</tr>
181+
</thead>
182+
<tbody>
183+
<tr>
184+
<td>
185+
<div class="tooltip top">tooltip top
186+
<div class="tooltip-inner">default top<div class="tooltip-angle"><div class="tooltip-angle-inner"></div></div></div>
187+
</div>
188+
</td>
189+
<td>
190+
<div class="tooltip top blue">tooltip top blue
191+
<div class="tooltip-inner">top blue<div class="tooltip-angle"><div class="tooltip-angle-inner"></div></div>
192+
</div>
193+
</td>
194+
<td>
195+
<div class="tooltip top green">tooltip top green
196+
<div class="tooltip-inner">top green<div class="tooltip-angle"><div class="tooltip-angle-inner"></div></div>
197+
</div>
198+
</td>
199+
<td>
200+
<div class="tooltip top orange">tooltip top orange
201+
<div class="tooltip-inner">top orange<div class="tooltip-angle"><div class="tooltip-angle-inner"></div></div>
202+
</div>
203+
</td>
204+
<td>
205+
<div class="tooltip top red">tooltip top red
206+
<div class="tooltip-inner">top red<div class="tooltip-angle"><div class="tooltip-angle-inner"></div></div></div>
207+
</div>
208+
</td>
209+
</tr>
210+
<tr>
211+
<td>
212+
<div class="tooltip bottom">tooltip bottom
213+
<div class="tooltip-inner">default bottom<div class="tooltip-angle"><div class="tooltip-angle-inner"></div></div></div>
214+
</div>
215+
</td>
216+
<td>
217+
<div class="tooltip bottom blue">tooltip bottom blue
218+
<div class="tooltip-inner">blue bottom<div class="tooltip-angle"><div class="tooltip-angle-inner"></div></div></div>
219+
</div>
220+
</td>
221+
<td>
222+
<div class="tooltip bottom green">tooltip bottom green
223+
<div class="tooltip-inner">green bottom<div class="tooltip-angle"><div class="tooltip-angle-inner"></div></div></div>
224+
</div>
225+
</td>
226+
<td>
227+
<div class="tooltip bottom orange">tooltip bottom orange
228+
<div class="tooltip-inner">orange bottom<div class="tooltip-angle"><div class="tooltip-angle-inner"></div></div></div>
229+
</div>
230+
</td>
231+
<td>
232+
<div class="tooltip bottom red">tooltip bottom red
233+
<div class="tooltip-inner">red bottom<div class="tooltip-angle"><div class="tooltip-angle-inner"></div></div></div>
234+
</div>
235+
</td>
236+
</tr>
237+
</tbody>
238+
</table>
239+
240+
</body>
241+
</html>

0 commit comments

Comments
 (0)