Tooltip by wilsondesouza

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: 5px;
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: 50%;
41  color: #4d4d4d;
42  background-color: #fff;
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 / 12%);
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
71.example-2 .icon-content a[data-social="linkedin"] .filled,
72.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
73  background-color: #0274b3;
74}
75
76.example-2 .icon-content a[data-social="github"] .filled,
77.example-2 .icon-content a[data-social="github"] ~ .tooltip {
78  background-color: #24262a;
79}
80.example-2 .icon-content a[data-social="instagram"] .filled,
81.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
82  background: linear-gradient(
83    45deg,
84    #405de6,
85    #5b51db,
86    #b33ab4,
87    #c135b4,
88    #e1306c,
89    #fd1f1f
90  );
91}
92.example-2 .icon-content a[data-social="youtube"] .filled,
93.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
94  background-color: #ff0000;
95}
96