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

Commit 13b2b29

Browse files
accgitaccgit
committed
Update
1 parent 1316c1f commit 13b2b29

File tree

3 files changed

+145
-101
lines changed

3 files changed

+145
-101
lines changed

‎src/css/style.tooltip.css

+37-38
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,58 @@
11

2-
/*
3-
tooltip
4-
*/
2+
/* tooltip
3+
========================================================================== */
54
.tooltip {
5+
display: inline-block;
66
position: relative;
7-
display: inline-block;
87
}
98

10-
.tooltip .text {
9+
.tooltip span {
1110
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-
}
21-
22-
.tooltip:hover .text {
11+
font-size: 0.938em;
12+
padding: 4px;
13+
opacity: 0;
14+
position: absolute;
15+
text-align: center;
16+
transition: opacity 0.2s;
17+
visibility: hidden;
18+
z-index: 1;
19+
}
20+
21+
.tooltip:hover span {
22+
opacity: 1;
2323
visibility: visible;
24-
opacity: 1;
2524
}
2625

2726
.tooltip .top {
2827
bottom: 120%;
29-
left: 50%;
28+
left: 50%;
3029
}
3130

3231
.tooltip .top::after {
3332
top: 100%;
3433
}
3534

36-
.tooltip .bottom {
37-
left: 50%;
38-
top: 120%;
39-
}
40-
41-
.tooltip .bottom::after {
42-
bottom: 100%;
43-
}
44-
4535
.tooltip .right {
4636
left: 125%;
47-
top: -2px;
37+
top: -2px;
4838
}
4939

5040
.tooltip .right::after {
5141
right: 100%;
5242
}
5343

44+
.tooltip .bottom {
45+
left: 50%;
46+
top: 120%;
47+
}
48+
49+
.tooltip .bottom::after {
50+
bottom: 100%;
51+
}
52+
5453
.tooltip .left {
5554
right: 125%;
56-
top: -2px;
55+
top: -2px;
5756
}
5857

5958
.tooltip .left::after {
@@ -65,31 +64,31 @@
6564
margin-left: -30px;
6665
}
6766

67+
.tooltip span ,
6868
.tooltip .top,
69-
.tooltip .bottom,
70-
.tooltip .text {
69+
.tooltip .bottom {
7170
width: 60px;
7271
}
7372

7473
.tooltip .top::after,
7574
.tooltip .bottom::after {
7675
margin-left: -5px;
77-
left: 50%;
76+
left: 50%;
7877
}
7978

8079
.tooltip .right::after,
8180
.tooltip .left::after {
82-
margin-top: -5px;
83-
top: 50%;
81+
margin-top: -5px;
82+
top: 50%;
8483
}
8584

8685
.tooltip .top::after,
87-
.tooltip .bottom::after,
8886
.tooltip .right::after,
87+
.tooltip .bottom::after,
8988
.tooltip .left::after {
9089
border-color: transparent;
91-
border-width: 5px;
9290
border-style: solid;
93-
position: absolute;
94-
content: " ";
91+
border-width: 5px;
92+
content: " ";
93+
position: absolute;
9594
}

‎src/css/style.tooltip.theme.css

+59-40
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,115 @@
11

2-
/*
3-
tooltip primary
4-
*/
5-
.tooltip .text.primary {
6-
background-color: rgb(16, 162, 241);
7-
color: white;
2+
/* tooltip primary
3+
========================================================================== */
4+
.tooltip span.primary {
5+
background: #1ba2eb;
6+
color: #fff;
87
}
98

109
.tooltip .top.primary::after {
11-
border-top-color: rgb(16, 162, 241);
10+
border-top-color: #1ba2eb;
1211
}
1312

1413
.tooltip .bottom.primary::after {
15-
border-bottom-color: rgb(16, 162, 241);
14+
border-bottom-color: #1ba2eb;
1615
}
1716

1817
.tooltip .right.primary::after {
19-
border-right-color: rgb(16, 162, 241);
18+
border-right-color: #1ba2eb;
2019
}
2120

2221
.tooltip .left.primary::after {
23-
border-left-color: rgb(16, 162, 241);
22+
border-left-color: #1ba2eb;
2423
}
2524

26-
/*
27-
tooltip common
28-
*/
29-
.tooltip .text.common {
30-
background-color: rgb(84, 84, 84);
31-
color: white;
25+
/* tooltip common
26+
========================================================================== */
27+
.tooltip span.common {
28+
background: #545454;
29+
color: #fff;
3230
}
3331

3432
.tooltip .top.common::after {
35-
border-top-color: rgb(84, 84, 84);
33+
border-top-color: #545454;
3634
}
3735

3836
.tooltip .bottom.common::after {
39-
border-bottom-color: rgb(84, 84, 84);
37+
border-bottom-color: #545454;
4038
}
4139

4240
.tooltip .right.common::after {
43-
border-right-color: rgb(84, 84, 84);
41+
border-right-color: #545454;
4442
}
4543

4644
.tooltip .left.common::after {
47-
border-left-color: rgb(84, 84, 84);
45+
border-left-color: #545454;
4846
}
4947

50-
/*
51-
tooltip success
52-
*/
53-
.tooltip .text.success {
54-
background-color: rgb(104, 192, 65);
55-
color: white;
48+
/* tooltip success
49+
========================================================================== */
50+
.tooltip span.success {
51+
background: #52d064;
52+
color: #fff;
5653
}
5754

5855
.tooltip .top.success::after {
59-
border-top-color: rgb(104, 192, 65);
56+
border-top-color: #52d064;
6057
}
6158

6259
.tooltip .bottom.success::after {
63-
border-bottom-color: rgb(104, 192, 65);
60+
border-bottom-color: #52d064;
6461
}
6562

6663
.tooltip .right.success::after {
67-
border-right-color: rgb(104, 192, 65);
64+
border-right-color: #52d064;
6865
}
6966

7067
.tooltip .left.success::after {
71-
border-left-color: rgb(104, 192, 65);
68+
border-left-color: #52d064;
7269
}
7370

74-
/*
75-
tooltip danger
76-
*/
77-
.tooltip .text.danger {
78-
background-color: rgb(226, 67, 67);
79-
color: white;
71+
/* tooltip warning
72+
========================================================================== */
73+
.tooltip span.warning {
74+
background-color: #ffd965;
75+
color: #a76600;
76+
}
77+
78+
.tooltip .top.warning::after {
79+
border-top-color: #ffd965;
80+
}
81+
82+
.tooltip .bottom.warning::after {
83+
border-bottom-color: #ffd965;
84+
}
85+
86+
.tooltip .right.warning::after {
87+
border-right-color: #ffd965;
88+
}
89+
90+
.tooltip .left.warning::after {
91+
border-left-color: #ffd965;
92+
}
93+
94+
/* tooltip danger
95+
========================================================================== */
96+
.tooltip span.danger {
97+
background-color: #ff3e59;
98+
color: #fff;
8099
}
81100

82101
.tooltip .top.danger::after {
83-
border-top-color: rgb(226, 67, 67);
102+
border-top-color: #ff3e59;
84103
}
85104

86105
.tooltip .bottom.danger::after {
87-
border-bottom-color: rgb(226, 67, 67);
106+
border-bottom-color: #ff3e59;
88107
}
89108

90109
.tooltip .right.danger::after {
91-
border-right-color: rgb(226, 67, 67);
110+
border-right-color: #ff3e59;
92111
}
93112

94113
.tooltip .left.danger::after {
95-
border-left-color: rgb(226, 67, 67);
114+
border-left-color: #ff3e59;
96115
}

‎src/index.html

+49-23
Original file line numberDiff line numberDiff line change
@@ -13,47 +13,73 @@
1313
<link rel="stylesheet" href="https://css-ui.github.io/css/cssui.min.css">
1414
<link rel="stylesheet" href="css/style.tooltip.css">
1515
<link rel="stylesheet" href="css/style.tooltip.theme.css">
16+
17+
<!-- only for demopage -->
1618
<style>
1719
body {
1820
font-family: 'Open Sans', sans-serif;
21+
padding: 50px 0 0 65px
22+
}
23+
24+
.container {
25+
max-width: 960px;
26+
}
27+
28+
@media only screen and (min-width: 768px) {
29+
body {
30+
padding-left: 0;
31+
}
1932
}
2033
</style>
2134
</head>
2235
<body>
23-
<div class="container" style="width: 600px; padding-top: 50px;">
36+
<div class="container">
2437
<h2>CSS UI - Tooltip</h2>
2538
<div class="row">
26-
<div class="six columns">
39+
<div class="two columns">
2740

2841
<!-- primary -->
29-
<p style="color: rgb(16, 162, 241); padding-top: 25px;"><b>Primary</b></p>
30-
<p><span class="tooltip">Top <span class="text primary top">Top</span></span></p>
31-
<p><span class="tooltip">Bottom <span class="text primary bottom">Bottom</span></span></p>
32-
<p><span class="tooltip">Left <span class="text primary left">Left</span></span></p>
33-
<p><span class="tooltip">Right <span class="text primary right">Right</span></span></p>
42+
<p style="color: #1ba2eb; padding-top: 25px;"><b>Primary</b></p>
43+
<p><span class="tooltip">Top <span class="primary top">Top</span></span></p>
44+
<p><span class="tooltip">Bottom <span class="primary bottom">Bottom</span></span></p>
45+
<p><span class="tooltip">Left <span class="primary left">Left</span></span></p>
46+
<p><span class="tooltip">Right <span class="primary right">Right</span></span></p>
47+
</div>
48+
<div class="two columns">
3449

3550
<!-- common -->
36-
<p style="color: rgb(84, 84, 84); padding-top: 25px;"><b>Common</b></p>
37-
<p><span class="tooltip">Top <span class="text common top">Top</span></span></p>
38-
<p><span class="tooltip">Bottom <span class="text common bottom">Bottom</span></span></p>
39-
<p><span class="tooltip">Left <span class="text common left">Left</span></span></p>
40-
<p><span class="tooltip">Right <span class="text common right">Right</span></span></p>
51+
<p style="color: #545454; padding-top: 25px;"><b>Common</b></p>
52+
<p><span class="tooltip">Top <span class="common top">Top</span></span></p>
53+
<p><span class="tooltip">Bottom <span class="common bottom">Bottom</span></span></p>
54+
<p><span class="tooltip">Left <span class="common left">Left</span></span></p>
55+
<p><span class="tooltip">Right <span class="common right">Right</span></span></p>
4156
</div>
42-
<div class="six columns">
57+
<div class="two columns">
4358

4459
<!-- success -->
45-
<p style="color: rgb(104, 192, 65); padding-top: 25px;"><b>Success</b></p>
46-
<p><span class="tooltip">Top <span class="text success top">Top</span></span></p>
47-
<p><span class="tooltip">Bottom <span class="text success bottom">Bottom</span></span></p>
48-
<p><span class="tooltip">Left <span class="text success left">Left</span></span></p>
49-
<p><span class="tooltip">Right <span class="text success right">Right</span></span></p>
60+
<p style="color: #52d064; padding-top: 25px;"><b>Success</b></p>
61+
<p><span class="tooltip">Top <span class="success top">Top</span></span></p>
62+
<p><span class="tooltip">Bottom <span class="success bottom">Bottom</span></span></p>
63+
<p><span class="tooltip">Left <span class="success left">Left</span></span></p>
64+
<p><span class="tooltip">Right <span class="success right">Right</span></span></p>
65+
</div>
66+
<div class="two columns">
67+
68+
<!-- warning -->
69+
<p style="color: #ffd965; padding-top: 25px;"><b>Warning</b></p>
70+
<p><span class="tooltip">Top <span class="warning top">Top</span></span></p>
71+
<p><span class="tooltip">Bottom <span class="warning bottom">Bottom</span></span></p>
72+
<p><span class="tooltip">Left <span class="warning left">Left</span></span></p>
73+
<p><span class="tooltip">Right <span class="warning right">Right</span></span></p>
74+
</div>
75+
<div class="two columns">
5076

5177
<!-- danger -->
52-
<p style="color: rgb(226, 67, 67); padding-top: 25px;"><b>Danger</b></p>
53-
<p><span class="tooltip">Top <span class="text danger top">Top</span></span></p>
54-
<p><span class="tooltip">Bottom <span class="text danger bottom">Bottom</span></span></p>
55-
<p><span class="tooltip">Left <span class="text danger left">Left</span></span></p>
56-
<p><span class="tooltip">Right <span class="text danger right">Right</span></span></p>
78+
<p style="color: #ff3e59; padding-top: 25px;"><b>Danger</b></p>
79+
<p><span class="tooltip">Top <span class="danger top">Top</span></span></p>
80+
<p><span class="tooltip">Bottom <span class="danger bottom">Bottom</span></span></p>
81+
<p><span class="tooltip">Left <span class="danger left">Left</span></span></p>
82+
<p><span class="tooltip">Right <span class="danger right">Right</span></span></p>
5783
</div>
5884
</div>
5985
</div>

0 commit comments

Comments
 (0)