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 db2d855

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

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/css/style.tooltip.css‎

Lines changed: 159 additions & 36 deletions
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‎

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

‎src/index.html‎

Lines changed: 48 additions & 4 deletions
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)

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