Tooltip by vikas7754

1.tooltip-container {
2  position: relative;
3  cursor: pointer;
4  transition: all 0.2s;
5  font-size: 17px;
6  border-radius: 10px;
7}
8
9.tooltip {
10  position: absolute;
11  top: 0;
12  left: 50%;
13  transform: translateX(-50%);
14  padding: 10px;
15  opacity: 0;
16  pointer-events: none;
17  transition: all 0.3s;
18  border-radius: 15px;
19  box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
20    inset -5px -5px 15px rgba(255, 255, 255, 0.1),
21    5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
22}
23
24.profile {
25  background: #2a2b2f;
26  border-radius: 10px 15px;
27  padding: 10px;
28  border: 1px solid rgba(11, 63, 95, 1);
29}
30
31.tooltip-container:hover .tooltip {
32  top: -150px;
33  opacity: 1;
34  visibility: visible;
35  pointer-events: auto;
36}
37
38.icon {
39  text-decoration: none;
40  color: #fff;
41  display: block;
42  position: relative;
43}
44.layer {
45  width: 55px;
46  height: 55px;
47  transition: transform 0.3s;
48}
49.icon:hover .layer {
50  transform: rotate(-35deg) skew(20deg);
51}
52.layer span {
53  position: absolute;
54  top: 0;
55  left: 0;
56  height: 100%;
57  width: 100%;
58  border: 1px solid #fff;
59  border-radius: 5px;
60  transition: all 0.3s;
61}
62
63.layer span,
64.text {
65  color: #1da1f2;
66  border-color: #1da1f2;
67}
68
69.icon:hover.layer span {
70  box-shadow: -1px 1px 3px #1da1f2;
71}
72.icon .text {
73  position: absolute;
74  left: 50%;
75  bottom: -5px;
76  opacity: 0;
77  font-weight: 500;
78  transform: translateX(-50%);
79  transition: bottom 0.3s ease, opacity 0.3s ease;
80}
81.icon:hover .text {
82  bottom: -35px;
83  opacity: 1;
84}
85
86.icon:hover .layer span:nth-child(1) {
87  opacity: 0.2;
88}
89.icon:hover .layer span:nth-child(2) {
90  opacity: 0.4;
91  transform: translate(5px, -5px);
92}
93.icon:hover .layer span:nth-child(3) {
94  opacity: 0.6;
95  transform: translate(10px, -10px);
96}
97.icon:hover .layer span:nth-child(4) {
98  opacity: 0.8;
99  transform: translate(15px, -15px);
100}
101.icon:hover .layer span:nth-child(5) {
102  opacity: 1;
103  transform: translate(20px, -20px);
104}
105
106.layer span.fab {
107  font-size: 30px;
108  line-height: 64px;
109  text-align: center;
110  fill: #1da1f2;
111  background: #000;
112}
113.user {
114  display: flex;
115  gap: 10px;
116}
117.img {
118  width: 50px;
119  height: 50px;
120  font-size: 25px;
121  font-weight: 700;
122  border: 1px solid #1da1f2;
123  border-radius: 10px;
124  display: flex;
125  align-items: center;
126  justify-content: center;
127  background: #fff;
128}
129.name {
130  font-size: 17px;
131  font-weight: 700;
132  color: #1da1f2;
133}
134.details {
135  display: flex;
136  flex-direction: column;
137  gap: 0;
138  color: #fff;
139}
140.about {
141  color: #ccc;
142  padding-top: 5px;
143}
144