Tooltip by bociKond

1.tooltip-container {
2  --white: #f2f2f2;
3  --background: #1f8392;
4  position: relative;
5  background: var(--background);
6  cursor: pointer;
7  transition: all 0.2s;
8  font-size: 2rem;
9  font-weight: 900;
10  color: var(--white);
11  width: 5rem;
12  aspect-ratio: 1/1;
13  display: flex;
14  align-items: center;
15  justify-content: center;
16  border-radius: 50%;
17}
18
19.tooltip {
20  position: absolute;
21  top: 0;
22  left: 50%;
23  transform: translateX(-50%);
24  padding: 0.3em 0.6em;
25  opacity: 0;
26  pointer-events: none;
27  background: var(--background);
28  transition: all 300ms;
29  fill: white;
30
31  display: flex;
32  align-items: center;
33  gap: 0.3rem;
34  border-radius: 30rem;
35}
36.tooltip .svg {
37  height: 3rem;
38  aspect-ratio: 1/1;
39  cursor: pointer;
40}
41.tooltip .svg:nth-child(2) {
42  width: 4rem;
43}
44.tooltip::before {
45  position: absolute;
46  content: "";
47  height: 0.6em;
48  width: 0.6em;
49  bottom: -0.2em;
50  left: 50%;
51  transform: translate(-50%) rotate(45deg);
52  background: var(--background);
53}
54.tooltip-container .text {
55  transition: all 600ms;
56}
57.tooltip-container:hover .text {
58  transform: rotate(225deg);
59}
60.tooltip-container:hover .tooltip {
61  top: -100%;
62  opacity: 1;
63  visibility: visible;
64  pointer-events: auto;
65}
66