Tooltip by akshat-patel28

1.tooltip-container {
2  position: relative;
3  background: #f80254;
4  cursor: pointer;
5  transition: all 0.2s;
6  font-size: 17px;
7  padding: 14px 26px;
8  border-radius: 5px;
9  text-align: center;
10  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.62),
11    inset 0px -2px 3px rgba(0, 0, 0, 0.48), inset 1px 1px 4px #ffffff,
12    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
13    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
14  display: flex;
15  align-items: center;
16  justify-content: center;
17  font-weight: 800;
18  color: #fff;
19}
20
21.tooltip-1,
22.tooltip-2,
23.tooltip-3 {
24  position: absolute;
25  transform: translateX(-50%);
26  font-weight: 800;
27  opacity: 0;
28  pointer-events: none;
29  transition: all 0.3s;
30  border-radius: 8px 8px 8px 8px;
31  background: #ffdb0f;
32  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.62),
33    inset 0px -2px 3px rgba(0, 0, 0, 0.48), inset 1px 1px 4px #ffffff,
34    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
35    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
36  min-width: 180px;
37  padding: 8px;
38  color: #ac0039;
39  font-size: 11px;
40}
41.tooltip-1 {
42  top: 0%;
43  left: 50%;
44  width: 200px;
45}
46.tooltip-2 {
47  left: 100%;
48}
49
50.tooltip-3 {
51  left: 0;
52}
53.tooltip-container:hover .tooltip-1 {
54  top: -100%;
55  opacity: 1;
56  visibility: visible;
57  pointer-events: auto;
58}
59.tooltip-container:hover .tooltip-2 {
60  left: -100%;
61  opacity: 1;
62  visibility: visible;
63  pointer-events: auto;
64}
65.tooltip-container:hover .tooltip-3 {
66  left: 200%;
67  opacity: 1;
68  visibility: visible;
69  pointer-events: auto;
70}
71