Tooltip by Faizuddinq

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