Skip to content

Commit 3c01e11

Browse files
JofunLiangJofunLiang
authored
Add files via upload
1 parent fe5ee93 commit 3c01e11

File tree

3 files changed

+393
-0
lines changed

3 files changed

+393
-0
lines changed

‎example.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<title>css3鼠标提示</title>
6+
<meta name="description" content="纯css鼠标提示工具。tooltip.css。" />
7+
<meta name="keywords" content="tooltip,鼠标提示css,鼠标提示工具,纯css鼠标提示工具,tooltip.css使用示例" />
8+
<link rel="stylesheet" href="tooltip.min.css" />
9+
<style>
10+
11+
body,h1,h2,strong,p{
12+
margin:0;
13+
padding:0;
14+
}
15+
16+
body{
17+
text-align:center;
18+
line-height:150%;
19+
font-size:16px;
20+
font-family: "微软雅黑";
21+
background-color:#EFF3FD;
22+
}
23+
24+
h2{margin-top:25px;}
25+
26+
strong{
27+
font-family: arial;
28+
}
29+
30+
.header{
31+
width:100%;
32+
height:180px;
33+
background-color:#66677C;
34+
color:#D5D6E2;
35+
}
36+
37+
.row{
38+
display:table;
39+
}
40+
41+
.col{
42+
width:300px;
43+
height:60px;
44+
display:table-cell;
45+
vertical-align: middle;
46+
padding:20px;
47+
box-sizing:border-box;
48+
}
49+
50+
.col p{
51+
padding:15px 30px;
52+
background-color:#fff;
53+
border:1px solid darkblue;
54+
color:darkblue;
55+
font-size:21px;
56+
}
57+
58+
.col p:hover{
59+
color:midnightblue;
60+
border-color:midnightblue;
61+
}
62+
63+
.demo{
64+
width:900px;
65+
margin-left:auto;
66+
margin-right:auto;
67+
margin-top:100px;
68+
}
69+
70+
[data-tooltip]:before{
71+
font-size:16px;
72+
}
73+
74+
</style>
75+
</head>
76+
<body>
77+
78+
<div class="header row">
79+
<div class="header-wrapper col">
80+
<h1>Tooltip.css</h1>
81+
<h2>纯 css3 Tooltip 提示工具样式</h2>
82+
<strong>A simple and easy-to-use css3 tooltip.</strong>
83+
</div>
84+
</div>
85+
86+
<div class="demo" >
87+
<div class="row">
88+
<div class="col">
89+
<p data-tooltip="top-left" data-tooltip-text="左上方提示样式，css3提示样式">Top Left</p>
90+
</div>
91+
<div class="col">
92+
<p data-tooltip="top" data-tooltip-text="上方提示样式">Top</p>
93+
</div>
94+
<div class="col">
95+
<p data-tooltip="top-right" data-tooltip-text="右上方提示样式，css3提示样式">Top Right</p>
96+
</div>
97+
</div>
98+
<div class="row">
99+
<div class="col">
100+
<p data-tooltip="left" data-tooltip-text="左边提示样式 &#010 这个是左边提示样式哦 &#010 css3提示样式">Left</p>
101+
</div>
102+
<div class="col" style="font-size:48px; font-weight: bold; color:darkblue;">Tooltip.css</div>
103+
<div class="col">
104+
<p data-tooltip="right" data-tooltip-text="右边提示样式 &#010 这个是右边提示样式哦 &#010 css3提示样式">Right</p>
105+
</div>
106+
</div>
107+
<div class="row">
108+
<div class="col">
109+
<p data-tooltip="bottom-left" data-tooltip-text="左下方提示样式，css3提示样式">Bottom Left</p>
110+
</div>
111+
<div class="col">
112+
<p data-tooltip="bottom" data-tooltip-text="下方提示样式">Bottom</p>
113+
</div>
114+
<div class="col">
115+
<p data-tooltip="bottom-right" data-tooltip-text="右下方提示样式，css3提示样式">Bottom Right</p>
116+
</div>
117+
</div>
118+
</div>
119+
120+
</body>
121+
</html>

‎tooltip.css‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
/*!
2+
* tooltip.css -https://github.com/JofunLiang/tooltip
3+
* Version - 2.0.0
4+
* Licensed under the MIT license - http://opensource.org/licenses/MIT
5+
* Copyright (c) 2018 jofun Liang
6+
*/
7+
8+
/*utils*/
9+
[data-tooltip] {
10+
position: relative;
11+
cursor: pointer;
12+
}
13+
14+
[data-tooltip]:before,
15+
[data-tooltip]:after {
16+
position: absolute;
17+
pointer-events: none;
18+
will-change: transform;
19+
transform: translate3d(0, 0, 0);
20+
transition: all 0.3s ease-in;
21+
z-index: 9;
22+
opacity: 0;
23+
}
24+
25+
[data-tooltip]:before {
26+
font-size: .95em;
27+
content: attr(data-tooltip-text);
28+
background-color: #222;
29+
padding: 0.3em 0.7em;
30+
color: #fff;
31+
white-space: pre;
32+
border-radius: 2px;
33+
line-height: 150%;
34+
box-shadow: 0 0 8px #999;
35+
}
36+
37+
[data-tooltip]:after {
38+
display: block;
39+
content: "";
40+
width: 0;
41+
height: 0;
42+
border-width: 8px;
43+
border-style: solid;
44+
border-color: transparent;
45+
}
46+
47+
[data-tooltip]:hover:before,
48+
[data-tooltip]:hover:after {
49+
opacity: 1;
50+
}
51+
52+
[data-tooltip=left]:before,
53+
[data-tooltip=left]:after,
54+
[data-tooltip=right]:before,
55+
[data-tooltip=right]:after {
56+
top: 50%;
57+
transform: translate(0, -50%);
58+
-webkit-transform: translate(0, -50%);
59+
-moz-transform: translate(0, -50%);
60+
-ms-transform: translate(0, -50%);
61+
}
62+
63+
[data-tooltip=top]:before,
64+
[data-tooltip=top]:after,
65+
[data-tooltip=bottom]:before,
66+
[data-tooltip=bottom]:after {
67+
left: 50%;
68+
transform: translate(-50%, 0);
69+
-webkit-transform: translate(-50%, 0);
70+
-moz-transform: translate(-50%, 0);
71+
-ms-transform: translate(-50%, 0);
72+
}
73+
74+
/*left*/
75+
[data-tooltip=left]:before {
76+
right: 100%;
77+
}
78+
79+
[data-tooltip=left]:after {
80+
left: -1px;
81+
border-right-width: 0;
82+
border-left-color: #222;
83+
}
84+
85+
[data-tooltip=left]:hover:before,
86+
[data-tooltip=left]:hover:after {
87+
transform: translate(-12px, -50%);
88+
-webkit-transform: translate(-12px, -50%);
89+
-moz-transform: translate(-12px, -50%);
90+
-ms-transform: translate(-12px, -50%);
91+
}
92+
93+
/*right*/
94+
[data-tooltip=right]:before {
95+
left: 100%;
96+
}
97+
98+
[data-tooltip=right]:after {
99+
right: -1px;
100+
border-left-width: 0;
101+
border-right-color: #222;
102+
}
103+
104+
[data-tooltip=right]:hover:before,
105+
[data-tooltip=right]:hover:after {
106+
transform: translate(12px, -50%);
107+
-webkit-transform: translate(12px, -50%);
108+
-moz-transform: translate(12px, -50%);
109+
-ms-transform: translate(12px, -50%);
110+
}
111+
112+
/*top*/
113+
[data-tooltip=top]:before {
114+
bottom: 100%;
115+
}
116+
117+
[data-tooltip=top]:after {
118+
top: -1px;
119+
border-bottom-width: 0;
120+
border-top-color: #222;
121+
}
122+
123+
[data-tooltip=top]:hover:before,
124+
[data-tooltip=top]:hover:after {
125+
transform: translate(-50%, -12px);
126+
-webkit-transform: translate(-50%, -12px);
127+
-moz-transform: translate(-50%, -12px);
128+
-ms-transform: translate(-50%, -12px);
129+
}
130+
131+
/*bottom*/
132+
[data-tooltip=bottom]:before {
133+
top: 100%;
134+
}
135+
136+
[data-tooltip=bottom]:after {
137+
bottom: -1px;
138+
border-top-width: 0;
139+
border-bottom-color: #222;
140+
}
141+
142+
[data-tooltip=bottom]:hover:before,
143+
[data-tooltip=bottom]:hover:after {
144+
transform: translate(-50%, 12px);
145+
-webkit-transform: translate(-50%, 12px);
146+
-moz-transform: translate(-50%, 12px);
147+
-ms-transform: translate(-50%, 12px);
148+
}
149+
150+
/*util2*/
151+
[data-tooltip=top-left]:after,
152+
[data-tooltip=top-right]:after,
153+
[data-tooltip=bottom-left]:after,
154+
[data-tooltip=bottom-right]:after {
155+
left: 50%;
156+
transform: translate(-50%, 0);
157+
-webkit-transform: translate(-50%, 0);
158+
-moz-transform: translate(-50%, 0);
159+
-ms-transform: translate(-50%, 0);
160+
}
161+
162+
[data-tooltip=top-left]:before,
163+
[data-tooltip=top-right]:before {
164+
bottom: 100%;
165+
}
166+
167+
[data-tooltip=top-left]:after,
168+
[data-tooltip=top-right]:after {
169+
top: -1px;
170+
border-bottom-width: 0;
171+
border-top-color: #222;
172+
}
173+
174+
[data-tooltip=top-left]:hover:after,
175+
[data-tooltip=top-right]:hover:after {
176+
transform: translate(-50%, -12px);
177+
-webkit-transform: translate(-50%, -12px);
178+
-moz-transform: translate(-50%, -12px);
179+
-ms-transform: translate(-50%, -12px);
180+
}
181+
182+
[data-tooltip=bottom-left]:before,
183+
[data-tooltip=bottom-right]:before {
184+
top: 100%;
185+
}
186+
187+
[data-tooltip=bottom-left]:after,
188+
[data-tooltip=bottom-right]:after {
189+
bottom: -1px;
190+
border-top-width: 0;
191+
border-bottom-color: #222;
192+
}
193+
194+
[data-tooltip=bottom-left]:hover:after,
195+
[data-tooltip=bottom-right]:hover:after {
196+
transform: translate(-50%, 12px);
197+
-webkit-transform: translate(-50%, 12px);
198+
-moz-transform: translate(-50%, 12px);
199+
-ms-transform: translate(-50%, 12px);
200+
}
201+
202+
/*top-left*/
203+
[data-tooltip=top-left]:before {
204+
right: 50%;
205+
transform: translate(14px, 0);
206+
-webkit-transform: translate(14px, 0);
207+
-moz-transform: translate(14px, 0);
208+
-ms-transform: translate(14px, 0);
209+
}
210+
211+
[data-tooltip=top-left]:hover:before {
212+
transform: translate(14px, -12px);
213+
-webkit-transform: translate(14px, -12px);
214+
-moz-transform: translate(14px, -12px);
215+
-ms-transform: translate(14px, -12px);
216+
}
217+
218+
/*top-right*/
219+
[data-tooltip=top-right]:before {
220+
left: 50%;
221+
transform: translate(-14px, 0);
222+
-webkit-transform: translate(-14px, 0);
223+
-moz-transform: translate(-14px, 0);
224+
-ms-transform: translate(-14px, 0);
225+
}
226+
227+
[data-tooltip=top-right]:hover:before {
228+
transform: translate(-14px, -12px);
229+
-webkit-transform: translate(-14px, -12px);
230+
-moz-transform: translate(-14px, -12px);
231+
-ms-transform: translate(-14px, -12px);
232+
}
233+
234+
/*bottom-left*/
235+
[data-tooltip=bottom-left]:before {
236+
right: 50%;
237+
transform: translate(14px, 0);
238+
-webkit-transform: translate(14px, 0);
239+
-moz-transform: translate(14px, 0);
240+
-ms-transform: translate(14px, 0);
241+
}
242+
243+
[data-tooltip=bottom-left]:hover:before {
244+
transform: translate(14px, 12px);
245+
-webkit-transform: translate(14px, 12px);
246+
-moz-transform: translate(14px, 12px);
247+
-ms-transform: translate(14px, 12px);
248+
}
249+
250+
/*bottom-right*/
251+
[data-tooltip=bottom-right]:before {
252+
left: 50%;
253+
transform: translate(-14px, 0);
254+
-webkit-transform: translate(-14px, 0);
255+
-moz-transform: translate(-14px, 0);
256+
-ms-transform: translate(-14px, 0);
257+
}
258+
259+
[data-tooltip=bottom-right]:hover:before {
260+
transform: translate(-14px, 12px);
261+
-webkit-transform: translate(-14px, 12px);
262+
-moz-transform: translate(-14px, 12px);
263+
-ms-transform: translate(-14px, 12px);
264+
}

‎tooltip.min.css‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)