Tooltip by WAIOKYERE

1ul {
2  list-style: none;
3}
4
5.example-2 {
6  display: flex;
7  justify-content: center;
8  align-items: center;
9}
10.example-2 .icon-content {
11  margin: 0 10px;
12  position: relative;
13}
14.example-2 .icon-content .tooltip {
15  position: absolute;
16  top: -30px;
17  left: 50%;
18  transform: translateX(-50%);
19  color: #fff;
20  padding: 6px 10px;
21  border-radius: 15px;
22  opacity: 0;
23  visibility: hidden;
24  font-size: 14px;
25  transition: all 0.3s ease;
26}
27.example-2 .icon-content:hover .tooltip {
28  opacity: 1;
29  visibility: visible;
30  top: -50px;
31}
32.example-2 .icon-content a {
33  position: relative;
34  overflow: hidden;
35  display: flex;
36  justify-content: center;
37  align-items: center;
38  width: 50px;
39  height: 50px;
40  border-radius: 20%;
41  color: #4d4d4d;
42  background-color: #ffff;
43  transition: all 0.3s ease-in-out;
44}
45.example-2 .icon-content a:hover {
46  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 50%);
47}
48.example-2 .icon-content a svg {
49  position: relative;
50  z-index: 1;
51  width: 30px;
52  height: 30px;
53}
54.example-2 .icon-content a:hover {
55  color: white;
56}
57.example-2 .icon-content a .filled {
58  position: absolute;
59  top: auto;
60  bottom: 0;
61  left: 0;
62  width: 100%;
63  height: 0;
64  background-color: #000;
65  transition: all 0.3s ease-in-out;
66}
67.example-2 .icon-content a:hover .filled {
68  height: 100%;
69}
70.example-2 .icon-content a[data-social="spotify"] .filled,
71.example-2 .icon-content a[data-social="spotify"] ~ .tooltip {
72  background-color: #1db954;
73}
74.example-2 .icon-content a[data-social="pinterest"] .filled,
75.example-2 .icon-content a[data-social="pinterest"] ~ .tooltip {
76  background-color: #bd081c;
77}
78.example-2 .icon-content a[data-social="dribbble"] .filled,
79.example-2 .icon-content a[data-social="dribbble"] ~ .tooltip {
80  background-color: #ea4c89;
81}
82.example-2 .icon-content a[data-social="telegram"] .filled,
83.example-2 .icon-content a[data-social="telegram"] ~ .tooltip {
84  background-color: #0088cc;
85}
86