Skip to content

Commit 0b0dac2

Browse files
solygambassolygambas
committed
add tooltip
1 parent 932a6bc commit 0b0dac2

File tree

3 files changed

+136
-0
lines changed

3 files changed

+136
-0
lines changed

‎90-tooltip/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!-- Based on Pure CSS Tooltip by Florin Pop (2019)
2+
see: https://www.florin-pop.com/blog/2019/05/pure-css-tooltip/ -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Tooltip</title>
11+
</head>
12+
<body>
13+
<div class="tooltip top">Show Top</div>
14+
<div class="tooltip right">Show Right</div>
15+
<div class="tooltip left">Show Left</div>
16+
<div class="tooltip bottom">Show Bottom</div>
17+
</body>
18+
</html>

‎90-tooltip/style.css

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Roboto", sans-serif;
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
overflow: hidden;
15+
margin: 0;
16+
background: #ece9e6;
17+
background: linear-gradient(to right, #ece9e6, #ffffff);
18+
text-align: center;
19+
}
20+
21+
.tooltip {
22+
background: #4e54c8;
23+
background: linear-gradient(to right, #4e54c8, #23287a);
24+
color: #fff;
25+
font-size: 1.25rem;
26+
border-radius: 10px;
27+
padding: 10px 15px;
28+
position: relative;
29+
margin: 15px;
30+
}
31+
32+
/* message */
33+
34+
.tooltip::after {
35+
background-color: #313247;
36+
border-radius: 10px;
37+
color: #fff;
38+
display: none;
39+
padding: 10px 15px;
40+
font-size: 1rem;
41+
font-weight: lighter;
42+
position: absolute;
43+
z-index: 1;
44+
}
45+
46+
.tooltip.top::after {
47+
content: "Top";
48+
top: 0;
49+
left: 50%;
50+
transform: translate(-50%, calc(-100% - 10px));
51+
}
52+
53+
.tooltip.bottom::after {
54+
content: "Bottom";
55+
bottom: 0;
56+
left: 50%;
57+
transform: translate(-50%, calc(100% + 10px));
58+
}
59+
60+
.tooltip.right::after {
61+
content: "Right";
62+
top: 0;
63+
right: 0;
64+
transform: translateX(calc(100% + 10px));
65+
}
66+
67+
.tooltip.left::after {
68+
content: "Left";
69+
top: 0;
70+
left: 0;
71+
transform: translateX(calc(-100% - 10px));
72+
}
73+
74+
.tooltip:hover::after {
75+
display: block;
76+
}
77+
78+
/* arrow */
79+
80+
.tooltip::before {
81+
content: "";
82+
background-color: #313247;
83+
display: none;
84+
position: absolute;
85+
width: 15px;
86+
height: 15px;
87+
z-index: 1;
88+
}
89+
90+
.tooltip:hover::before {
91+
display: block;
92+
}
93+
94+
.tooltip.top::before {
95+
top: 0;
96+
left: 50%;
97+
transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
98+
}
99+
100+
.tooltip.bottom::before {
101+
bottom: 0;
102+
left: 50%;
103+
transform: translate(-50%, calc(100% + 5px)) rotate(45deg);
104+
}
105+
106+
.tooltip.right::before {
107+
top: 50%;
108+
right: 0;
109+
transform: translate(calc(100% + 5px), -50%) rotate(45deg);
110+
}
111+
112+
.tooltip.left::before {
113+
top: 50%;
114+
left: 0;
115+
transform: translate(calc(-100% - 5px), -50%) rotate(45deg);
116+
}

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@
9595
| 87 | [Sliding Sign In & Sign Up Form](https://github.com/solygambas/html-css-fifty-projects/tree/master/87-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm) |
9696
| 88 | [Promo Code](https://github.com/solygambas/html-css-fifty-projects/tree/master/88-promo%20code) | [Live Demo](https://codepen.io/solygambas/full/wvggBXe) |
9797
| 89 | [One Color UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/89-one%20color%20UI) | [Live Demo](https://codepen.io/solygambas/full/NWdpPqx) |
98+
| 90 | [Tooltip](https://github.com/solygambas/html-css-fifty-projects/tree/master/90-tooltip) | [Live Demo](https://codepen.io/solygambas/full/YzNgzMb) |
9899

99100
This repository is mostly based on 2 courses by Brad Traversy (2020):
100101

@@ -108,3 +109,4 @@ The other projects are adapted from various YouTube channels:
108109
- Simo Edwin - [Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q)
109110
- Gary Simon - [DesignCourse](https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow)
110111
- [Kevin Powell](https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw)
112+
- [Florin Pop](https://www.youtube.com/channel/UCeU-1X402kT-JlLdAitxSMA)

0 commit comments

Comments
 (0)