Tooltip by Quezaquo

1.container {
2  font-size: 18px;
3  color: #333;
4  position: relative;
5  cursor: pointer;
6  display: inline-block;
7}
8
9.hover-me {
10  position: relative;
11  z-index: 1;
12  text-decoration: underline;
13  text-underline-offset: 4px;
14  text-decoration-color: #333;
15}
16
17.tooltip {
18  width: 100%;
19  height: 10px;
20  background: #ffffff;
21  padding: 0.25em;
22  text-align: center;
23  position: absolute;
24  top: 40px;
25  left: 0;
26  opacity: 0;
27  visibility: hidden;
28  transform-origin: center top;
29  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
30  transition: opacity 0.3s ease-in-out;
31}
32
33.tooltip::before {
34  content: "";
35  position: absolute;
36  bottom: -8px;
37  left: 80%;
38  transform: translateX(-50%);
39  border-width: 8px 7px 0;
40  border-style: solid;
41  border-color: #ffffff transparent transparent transparent;
42  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
43}
44
45.tooltip p {
46  margin: 0;
47  color: #333;
48  font-weight: 600;
49}
50
51.container:hover .tooltip {
52  top: -10px;
53  opacity: 1;
54  visibility: visible;
55  animation: goPopup 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
56}
57
58.container:hover .tooltip p {
59  animation: bounce 2s ease-in-out infinite;
60}
61
62@keyframes goPopup {
63  0% {
64    transform: translateY(0) scaleY(0);
65    opacity: 0;
66  }
67  50% {
68    transform: translateY(-50%) scaleY(1.2);
69    opacity: 1;
70  }
71  100% {
72    transform: translateY(-100%) scaleY(1);
73    border-radius: 8px;
74    opacity: 1;
75    height: 40px;
76  }
77}
78
79@keyframes bounce {
80  0%,
81  20%,
82  50%,
83  80%,
84  100% {
85    transform: translateY(0);
86  }
87  40% {
88    transform: translateY(-3px);
89  }
90  60% {
91    transform: translateY(-2px);
92  }
93}
94