Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Sep 5, 2019. It is now read-only.

Commit 13b2b29

Browse files
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‎

Lines changed: 37 additions & 38 deletions
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‎

Lines changed: 59 additions & 40 deletions
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‎

Lines changed: 49 additions & 23 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /