Tooltip by escannord

1/* This is an example, feel free to delete this code */
2.tooltip-container {
3  --background: #4132c9;
4  --support-size: 50px;
5  --tooltip-radius: 10px 10px 10px 0;
6  --outline-border-color: #0096aa;
7  position: relative;
8  background: transparent;
9  cursor: pointer;
10  transition: all 0.2s;
11  font-size: 17px;
12  font-weight: bold;
13  padding: 0.7em 1.8em;
14  color: var(--background);
15  border: solid 2px var(--background);
16}
17
18.tooltip-container::before {
19  content: "";
20  display: inline-block;
21  border-radius: 50%;
22  position: absolute;
23  top: 50%;
24  left: 50%;
25  transform: translate(-50%, -50%);
26  z-index: -1;
27  transition: all 0.5s linear;
28  outline: 3px solid transparent;
29  background: var(--background);
30}
31.tooltip-container:hover {
32  color: white;
33}
34.tooltip-container:hover:before {
35  width: 100%;
36  height: 100%;
37  border-radius: 0;
38  outline-offset: 5px;
39  outline-color: var(--outline-border-color);
40}
41.tooltip {
42  position: absolute;
43  display: inline-block;
44  top: 0;
45  left: 50%;
46  transform: translateX(-5%);
47  padding: 0.3em 0.6em;
48  opacity: 0;
49  pointer-events: none;
50  transition: all 0.3s;
51  background: var(--background);
52  border-radius: var(--tooltip-radius);
53  color: white;
54  box-shadow: 3px 3px 0px var(--outline-border-color);
55}
56
57.tooltip::after {
58  content: "Hello!👋";
59  display: inline-block;
60  position: absolute;
61  width: 100%;
62  height: 100%;
63  top: 50%;
64  left: 50%;
65  transform: translate(-50%, -50%);
66  background-color: var(--background);
67  text-align: center;
68  border-radius: var(--tooltip-radius);
69}
70.tooltip::before {
71  position: absolute;
72  content: "";
73  bottom: 0;
74  border-style: solid;
75  border-width: 10px;
76  left: 0;
77  transform: translateX(-50%);
78  border-color: transparent var(--background) var(--background) transparent;
79  box-shadow: 0px 3px 0px var(--outline-border-color);
80}
81
82.tooltip-container:hover .tooltip::after {
83  animation: hidden 0.5s 1.5s linear forwards;
84}
85
86.tooltip-container:hover .tooltip {
87  top: calc(-100% - var(--support-size) * 0.5);
88  opacity: 1;
89  visibility: visible;
90  pointer-events: auto;
91  animation: shake 0.5s 1s linear;
92  transition: all 0.3s 0.5s;
93}
94
95@keyframes hidden {
96  50% {
97    transform: translate(-50%, -50%) scale(0.5);
98    background-color: #1ca0f5;
99  }
100  100% {
101    transform: translate(0, -50%) scale(0.5);
102    opacity: 0;
103  }
104}
105
106@keyframes shake {
107  0%,
108  40%,
109  80% {
110    transform: translateX(-10%);
111  }
112  20%,
113  60%,
114  100% {
115    transform: translateX(0);
116  }
117}
118
119.st2 {
120  fill: #f9c8a7;
121}
122.st3 {
123  fill: #ff9e97;
124}
125.st6 {
126  fill: #d72e48;
127}
128.st7 {
129  fill: #ffffff;
130}
131.st8 {
132  fill: #ff8d7f;
133}
134.st10 {
135  fill: #3d3d3b;
136}
137.st11 {
138  fill: #1ca0f5;
139}
140.st12 {
141  opacity: 0.2;
142}
143.st14 {
144  fill: #b7b7b7;
145}
146.st15 {
147  fill: #ead9cf;
148}
149#Calque_1 {
150  display: inline-block;
151  height: var(--support-size);
152  position: absolute;
153  opacity: 0;
154  transition: all 0.5s;
155  z-index: -1;
156  left: 0;
157  top: 0;
158}
159#left_x5F_arm_2_ {
160  transform: translateX(2px);
161}
162
163.tooltip-container:hover #Calque_1 {
164  top: calc(var(--support-size) * -1);
165  opacity: 1;
166}
167