Skip to content
This repository was archived by the owner on Sep 5, 2019. It is now read-only.

Commit db2d855

Browse files
accgitaccgit
committed
New version
1 parent ef9bef1 commit db2d855

File tree

4 files changed

+209
-65
lines changed

4 files changed

+209
-65
lines changed

‎src/css/style.css

-25
This file was deleted.

‎src/css/style.tooltip.css

+159-36
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,177 @@
22
/*
33
tooltip
44
*/
5-
[data-tooltip] {
5+
.tooltip {
66
position: relative;
7-
z-index: 2;
7+
display: inline-block;
88
}
99

10-
[data-tooltip]:before,
11-
[data-tooltip]:after {
12-
visibility: hidden;
13-
opacity: 0;
10+
.tooltip .text {
11+
border-radius: 3px;
12+
visibility: hidden;
13+
transition: opacity 0.5s;
14+
text-align: center;
15+
font-size: 0.938em;
16+
position: absolute;
17+
padding: 4px;
18+
z-index: 1;
19+
opacity: 0;
20+
color: white;
1421
}
1522

16-
[data-tooltip]:hover {
17-
text-decoration: none;
23+
.tooltip .text.primary {
24+
background-color: rgb(16, 162, 241);
1825
}
1926

20-
[data-tooltip]:before {
21-
background-color: rgba(0, 0, 0, 0.95);
22-
border-radius: 3px;
23-
margin-bottom: 5px;
24-
margin-left: -35px;
25-
text-align: center;
26-
min-width: 70px;
27-
font-size: 0.83em;
28-
position: absolute;
29-
content: attr(data-tooltip);
30-
padding: 2px;
31-
bottom: 120%;
32-
color: #9e9e9e;
33-
left: 50%;
27+
.tooltip .text.common {
28+
background-color: rgb(84, 84, 84);
3429
}
3530

31+
.tooltip .text.success {
32+
background-color: rgb(104, 192, 65);
33+
}
3634

37-
[data-tooltip]:after {
38-
border-right: 5px solid transparent;
39-
border-left: 5px solid transparent;
40-
margin-left: -5px;
41-
line-height: 0;
42-
border-top: 5px solid rgba(0, 0, 0, 0.95);
43-
font-size: 0;
44-
position: absolute;
45-
content: " ";
46-
bottom: 120%;
47-
width: 0;
48-
left: 50%;
35+
.tooltip .text.danger {
36+
background-color: rgb(226, 67, 67);
4937
}
5038

51-
[data-tooltip]:hover:before,
52-
[data-tooltip]:hover:after {
39+
.tooltip:hover .text {
5340
visibility: visible;
5441
opacity: 1;
5542
}
43+
44+
.tooltip .top {
45+
bottom: 120%;
46+
left: 50%;
47+
}
48+
49+
.tooltip .top::after {
50+
top: 100%;
51+
}
52+
53+
.tooltip .top.primary::after {
54+
border-top-color: rgb(16, 162, 241);
55+
}
56+
57+
.tooltip .top.common::after {
58+
border-top-color: rgb(84, 84, 84);
59+
}
60+
61+
.tooltip .top.success::after {
62+
border-top-color: rgb(104, 192, 65);
63+
}
64+
65+
66+
.tooltip .top.danger::after {
67+
border-top-color: rgb(226, 67, 67);
68+
}
69+
70+
71+
.tooltip .bottom {
72+
left: 50%;
73+
top: 120%;
74+
}
75+
76+
.tooltip .bottom::after {
77+
bottom: 100%;
78+
}
79+
80+
.tooltip .bottom.primary::after {
81+
border-bottom-color: rgb(16, 162, 241);
82+
}
83+
84+
.tooltip .bottom.common::after {
85+
border-bottom-color: rgb(84, 84, 84);
86+
}
87+
88+
.tooltip .bottom.success::after {
89+
border-bottom-color: rgb(104, 192, 65);
90+
}
91+
92+
.tooltip .bottom.danger::after {
93+
border-bottom-color: rgb(226, 67, 67);
94+
}
95+
96+
.tooltip .right {
97+
left: 125%;
98+
top: -2px;
99+
}
100+
101+
.tooltip .right::after {
102+
right: 100%;
103+
}
104+
105+
.tooltip .right.primary::after {
106+
border-right-color: rgb(16, 162, 241);
107+
}
108+
109+
.tooltip .right.common::after {
110+
border-right-color: rgb(84, 84, 84);
111+
}
112+
113+
.tooltip .right.success::after {
114+
border-right-color: rgb(104, 192, 65);
115+
}
116+
117+
.tooltip .right.danger::after {
118+
border-right-color: rgb(226, 67, 67);
119+
}
120+
121+
.tooltip .left {
122+
right: 125%;
123+
top: -2px;
124+
}
125+
126+
.tooltip .left::after {
127+
left: 100%;
128+
}
129+
130+
.tooltip .left.primary::after {
131+
border-left-color: rgb(16, 162, 241);
132+
}
133+
134+
.tooltip .left.common::after {
135+
border-left-color: rgb(84, 84, 84);
136+
}
137+
138+
.tooltip .left.success::after {
139+
border-left-color: rgb(104, 192, 65);
140+
}
141+
142+
.tooltip .left.danger::after {
143+
border-left-color: rgb(226, 67, 67);
144+
}
145+
146+
.tooltip .top,
147+
.tooltip .bottom {
148+
margin-left: -30px;
149+
}
150+
151+
.tooltip .top,
152+
.tooltip .bottom,
153+
.tooltip .text {
154+
width: 60px;
155+
}
156+
157+
.tooltip .top::after,
158+
.tooltip .bottom::after {
159+
margin-left: -5px;
160+
left: 50%;
161+
}
162+
163+
.tooltip .right::after,
164+
.tooltip .left::after {
165+
margin-top: -5px;
166+
top: 50%;
167+
}
168+
169+
.tooltip .top::after,
170+
.tooltip .bottom::after,
171+
.tooltip .right::after,
172+
.tooltip .left::after {
173+
border-color: transparent;
174+
border-width: 5px;
175+
border-style: solid;
176+
position: absolute;
177+
content: " ";
178+
}

‎src/css/style.tooltip.min.css

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.html

+48-4
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,56 @@
88
<title>CSS UI - Tooltip</title>
99

1010
<!-- CSS styles -->
11-
<link rel="stylesheet" href="css/style.css">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
12+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&amp;subset=latin-ext">
13+
<link rel="stylesheet" href="https://css-ui.github.io/css/cssui.min.css">
14+
<link rel="stylesheet" href="css/style.tooltip.css">
15+
<style>
16+
body {
17+
font-family: 'Open Sans', sans-serif;
18+
}
19+
</style>
1220
</head>
1321
<body>
14-
<!-- container -->
15-
<div class="container">
16-
<a href="#" data-tooltip="Hello">Hello</a>
22+
<!--
23+
sample page
24+
-->
25+
<div class="container" style="width: 600px; padding-top: 50px;">
26+
<h2>CSS UI - Tooltip</h2>
27+
<div class="row">
28+
<div class="six columns">
29+
30+
<!-- primary -->
31+
<p style="color: rgb(16, 162, 241); padding-top: 25px;"><b>Primary</b></p>
32+
<p><span class="tooltip">Top <span class="text primary top">Top</span></span></p>
33+
<p><span class="tooltip">Bottom <span class="text primary bottom">Bottom</span></span></p>
34+
<p><span class="tooltip">Left <span class="text primary left">Left</span></span></p>
35+
<p><span class="tooltip">Right <span class="text primary right">Right</span></span></p>
36+
37+
<!-- common -->
38+
<p style="color: rgb(84, 84, 84); padding-top: 25px;"><b>Common</b></p>
39+
<p><span class="tooltip">Top <span class="text common top">Top</span></span></p>
40+
<p><span class="tooltip">Bottom <span class="text common bottom">Bottom</span></span></p>
41+
<p><span class="tooltip">Left <span class="text common left">Left</span></span></p>
42+
<p><span class="tooltip">Right <span class="text common right">Right</span></span></p>
43+
</div>
44+
<div class="six columns">
45+
46+
<!-- success -->
47+
<p style="color: rgb(104, 192, 65); padding-top: 25px;"><b>Success</b></p>
48+
<p><span class="tooltip">Top <span class="text success top">Top</span></span></p>
49+
<p><span class="tooltip">Bottom <span class="text success bottom">Bottom</span></span></p>
50+
<p><span class="tooltip">Left <span class="text success left">Left</span></span></p>
51+
<p><span class="tooltip">Right <span class="text success right">Right</span></span></p>
52+
53+
<!-- danger -->
54+
<p style="color: rgb(226, 67, 67); padding-top: 25px;"><b>Danger</b></p>
55+
<p><span class="tooltip">Top <span class="text danger top">Top</span></span></p>
56+
<p><span class="tooltip">Bottom <span class="text danger bottom">Bottom</span></span></p>
57+
<p><span class="tooltip">Left <span class="text danger left">Left</span></span></p>
58+
<p><span class="tooltip">Right <span class="text danger right">Right</span></span></p>
59+
</div>
60+
</div>
1761
</div>
1862
</body>
1963
</html>

0 commit comments

Comments
 (0)