Tooltip by vnuny

1.item-hints {
2  --purple: #720c8f;
3  cursor: pointer;
4  display: flex;
5  justify-content: flex-start;
6  padding-right: 170px;
7}
8.item-hints .hint {
9  margin: 150px auto;
10  position: relative;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14}
15.item-hints .hint-dot {
16  z-index: 3;
17  border: 1px solid #ffe4e4;
18  border-radius: 50%;
19  width: 60px;
20  height: 60px;
21  -webkit-transform: translate(-0%, -0%) scale(0.95);
22  transform: translate(-0%, -0%) scale(0.95);
23  margin: auto;
24  display: flex;
25  align-items: center;
26  justify-content: center;
27  color: white;
28}
29.item-hints .hint-radius {
30  background-color: rgba(255, 255, 255, 0.1);
31  border-radius: 50%;
32  position: absolute;
33  top: 50%;
34  left: 50%;
35  margin: -125px 0 0 -125px;
36  opacity: 0;
37  visibility: hidden;
38  -webkit-transform: scale(0);
39  transform: scale(0);
40}
41.item-hints .hint[data-position="1"] .hint-content {
42  top: 85px;
43  left: 50%;
44  margin-left: 56px;
45}
46.item-hints .hint-content {
47  width: 300px;
48  position: absolute;
49  z-index: 5;
50  padding: 35px 0;
51  opacity: 0;
52  transition: opacity 0.7s ease, visibility 0.7s ease;
53  color: #fff;
54  visibility: hidden;
55  pointer-events: none;
56}
57.item-hints .hint:hover .hint-content {
58  position: absolute;
59  z-index: 5;
60  padding: 35px 0;
61  opacity: 1;
62  -webkit-transition: opacity 0.7s ease, visibility 0.7s ease;
63  transition: opacity 0.7s ease, visibility 0.7s ease;
64  color: #fff;
65  visibility: visible;
66  pointer-events: none;
67}
68.item-hints .hint-content::before {
69  width: 0px;
70  bottom: 29px;
71  left: 0;
72  content: "";
73  background-color: #fff;
74  height: 1px;
75  position: absolute;
76  transition: width 0.4s;
77}
78.item-hints .hint:hover .hint-content::before {
79  width: 180px;
80  transition: width 0.4s;
81}
82.item-hints .hint-content::after {
83  -webkit-transform-origin: 0 50%;
84  transform-origin: 0 50%;
85  -webkit-transform: rotate(-225deg);
86  transform: rotate(-225deg);
87  bottom: 29px;
88  left: 0;
89  width: 80px;
90  content: "";
91  background-color: #fff;
92  height: 1px;
93  position: absolute;
94  opacity: 1;
95  -webkit-transition: opacity 0.5s ease;
96  transition: opacity 0.5s ease;
97  -webkit-transition-delay: 0s;
98  transition-delay: 0s;
99}
100.item-hints .hint:hover .hint-content::after {
101  opacity: 1;
102  visibility: visible;
103}
104.item-hints .hint[data-position="4"] .hint-content {
105  bottom: 85px;
106  left: 50%;
107  margin-left: 56px;
108}
109