Skip to content

Commit 89d3938

Browse files
ui2codeui2code
authored
Merge pull request #8 from hemersonvianna/feature/day-21
feat: tooltip with aria-label
2 parents 4d23305 + c78c92a commit 89d3938

File tree

3 files changed

+126
-1
lines changed

3 files changed

+126
-1
lines changed

‎2019/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333
|Day 18 | <img src="thumbnails/day-18.jpg" width="100"> | [Wave Text Animation](./day-18/)
3434
|Day 19 | <img src="thumbnails/day-19.jpg" width="100"> | [Flip Card](./day-19/)
3535
|Day 20 | <img src="thumbnails/day-20.jpg" width="100"> | [Custom Toggle Switch](./day-20/)
36+
|Day 21 | <img src="thumbnails/day-21.jpg" width="100"> | [Tooltip with aria-label](./day-21/)
3637

37-
- [Day 21 - ](./day-21/)
3838
- [Day 22 - ](./day-22/)
3939
- [Day 23 - ](./day-23/)
4040
- [Day 24 - ](./day-24/)

‎2019/day-21/day-21.css

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
.tooltip { position: relative; text-decoration: none; }
2+
3+
.tooltip:after,
4+
.tooltip:before { opacity: 0; position: absolute; transition: opacity .25s ease-in-out; z-index: 100; }
5+
6+
.tooltip:before { content: ''; border-width: 6px; border-style: solid; height: 0; width: 0; }
7+
8+
.tooltip:after {
9+
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
10+
content: attr(aria-label);
11+
line-height: 1;
12+
padding: 5px 10px;
13+
font-size: 1rem;
14+
text-align: center;
15+
color: #fff;
16+
background: #000;
17+
border-radius: 4px;
18+
text-shadow: 0 0 5px #000;
19+
white-space: nowrap
20+
}
21+
22+
.tooltip:hover:after,
23+
.tooltip:focus:after,
24+
.tooltip:hover:before,
25+
.tooltip:focus:before { opacity: 1; }
26+
27+
/* TOP */
28+
.tooltip.top:after,
29+
.tooltip.top:before { bottom: 90%; left: -9999px; margin-bottom: 12px; transition: bottom .25s ease-in-out; }
30+
31+
.tooltip.top:before { border-color: #222 transparent transparent transparent; margin-bottom: 0 }
32+
33+
.tooltip.top:hover:after,
34+
.tooltip.top:focus:after,
35+
.tooltip.top:hover:before,
36+
.tooltip.top:focus:before { bottom: 85%; left: 0 }
37+
38+
.tooltip.top:hover:before,
39+
.tooltip.top:focus:before { left: 15px; }
40+
41+
/* BOTTOM */
42+
.tooltip.bottom:after,
43+
.tooltip.bottom:before { margin-top: 12px; left: -9999px; transition: top .25s ease-in-out; top: 90%; }
44+
45+
.tooltip.bottom:before { border-color: transparent transparent #222 transparent; margin-top: 0 }
46+
47+
.tooltip.bottom:hover:after,
48+
.tooltip.bottom:focus:after,
49+
.tooltip.bottom:hover:before,
50+
.tooltip.bottom:focus:before { left: 0; top: 85%; }
51+
52+
.tooltip.bottom:hover:before,
53+
.tooltip.bottom:focus:before { left: 15px; }
54+
55+
/* RIGHT */
56+
.tooltip.right:after,
57+
.tooltip.right:before { left: 96%; margin-left: 12px; top: -9999px; transition: left .25s ease-in-out; }
58+
59+
.tooltip.right:before { border-color: transparent #222 transparent transparent; margin-left: 0; }
60+
61+
.tooltip.right:hover:after,
62+
.tooltip.right:focus:after,
63+
.tooltip.right:hover:before,
64+
.tooltip.right:focus:before { left: 95%; top: 0; }
65+
66+
.tooltip.right:hover:before,
67+
.tooltip.right:focus:before { top: 7px; }
68+
69+
/* LEFT */
70+
.tooltip.left:after,
71+
.tooltip.left:before { margin-right: 12px; right: 96%; top: -9999px; transition: right .25s ease-in-out; }
72+
73+
.tooltip.left:before { border-color: transparent transparent transparent #222; margin-right: 0; }
74+
75+
.tooltip.left:hover:after,
76+
.tooltip.left:focus:after,
77+
.tooltip.left:hover:before,
78+
.tooltip.left:focus:before { right: 95%; top: 0; }
79+
80+
.tooltip.left:hover:before,
81+
.tooltip.left:focus:before { top: 7px; }
82+
83+
/* LINK */
84+
.link {
85+
background: #fff;
86+
border-radius: 4px;
87+
color: #333;
88+
cursor: pointer;
89+
display: inline-block;
90+
font-size: 1.2rem;
91+
min-width: 100px;
92+
padding: 8px 15px;
93+
position: relative;
94+
text-align: center;
95+
text-decoration: none;
96+
}
97+
98+
.link:hover,
99+
.link:focus { background: #eee }

‎2019/day-21/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Day 21</title>
8+
<style>
9+
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
10+
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
11+
* { margin: 0; padding: 0; list-style: none; }
12+
body { background: #eee; font-family: Arial, Helvetica, sans-serif; }
13+
14+
.container { margin: 80px auto; max-width: 992px; text-align: center; width: 100%; }
15+
</style>
16+
<link rel="stylesheet" type="text/css" href="./day-21.css">
17+
</head>
18+
<body>
19+
<div class="container">
20+
<a href="#tooltip" role="tooltip" class="link tooltip left" aria-label="lorem ipsum - left">Left</a>
21+
<a href="#tooltip" role="tooltip" class="link tooltip top" aria-label="lorem ipsum - top">Top</a>
22+
<a href="#tooltip" role="tooltip" class="link tooltip bottom" aria-label="lorem ipsum - bottom">Bottom</a>
23+
<a href="#tooltip" role="tooltip" class="link tooltip right" aria-label="lorem ipsum - right">Right</a>
24+
</div>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)