Tooltip by jamik-dev

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