Tooltip by SelfMadeSystem

1/* This is very original.
2I'm also too lazy to figure out how to add the arrow
3without excessive SVG. I know I'm not going to win, so
4why not just try to emulate the thing in the image */
5.tooltip-container {
6  --background: #fefbff;
7  --inner-shadow: #9faef9;
8  --inner-outline: #34217d;
9  --inner-outline-bottom: #fafcfe;
10  --inner-outline-middle: #8880d5;
11  --inner-outline-outer-top: #fefcff;
12  --inner-outline-outer-bottom-1: #29107b;
13  --inner-outline-outer-bottom-2: #5b42c4;
14  --inner-outline-outer-bottom-3: #200265;
15  --line-1: #8676c9;
16  --line-2: #5c69ca;
17  position: relative;
18  background: var(--background);
19  cursor: pointer;
20  transition: all 0.2s;
21  font-size: 17px;
22  padding: 0.7em 1.8em;
23  border-radius: 5px;
24  box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),
25    0px 2px 0px 0px var(--inner-outline-bottom),
26    0px -2px 0px 0px var(--inner-outline),
27    -2px -2px 0px 0px var(--inner-outline),
28    2px -2px 0px 0px var(--inner-outline),
29    0px 0px 0px 6px var(--inner-outline-middle),
30    0px -2px 0px 7px var(--inner-outline-outer-top),
31    0px 4px 0px 7px var(--inner-outline-outer-bottom-1);
32}
33
34.tooltip-icon {
35  display: inline-block;
36  vertical-align: top;
37  width: 1.5em;
38}
39
40.tooltip-icon path {
41  stroke-width: 2px;
42  stroke: var(--inner-outline);
43  stroke-linejoin: round;
44}
45
46.tooltip-lines {
47  display: flex;
48  flex-direction: column;
49  gap: 0.4em;
50}
51
52.tooltip-line-1 {
53  height: 0.2em;
54  width: 4em;
55  border-radius: 10em;
56  display: inline-block;
57  background: var(--line-1);
58}
59
60.tooltip-line-2 {
61  height: 0.2em;
62  width: 3em;
63  border-radius: 10em;
64  display: inline-block;
65  background: var(--line-2);
66}
67
68.tooltip {
69  position: absolute;
70  display: flex;
71  gap: 0.4em;
72  align-items: center;
73  top: 0;
74  left: 50%;
75  transform: translateX(-50%);
76  padding: 0.6em 0.8em;
77  opacity: 0;
78  pointer-events: none;
79  transition: all 0.3s;
80  background: var(--background);
81  border-radius: 0.7em;
82
83  box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),
84    0px 2px 0px 0px var(--inner-outline-bottom),
85    0px -2px 0px 0px var(--inner-outline),
86    -2px -2px 0px 0px var(--inner-outline),
87    2px -2px 0px 0px var(--inner-outline),
88    0px 0px 0px 6px var(--inner-outline-middle),
89    0px -2px 0px 7px var(--inner-outline-outer-top),
90    0px 4px 0px 7px var(--inner-outline-outer-bottom-1),
91    0px 7px 0px 7px var(--inner-outline-outer-bottom-2),
92    0px 10px 0px 7px var(--inner-outline-outer-bottom-3);
93}
94
95/* .tooltip::before {
96  content: "";
97  position: absolute;
98  height: 1em;
99  width: 1em;
100  bottom: -0.2em;
101  left: 50%;
102  transform: translate(-50%) translateY(2px) rotate(45deg);
103  background: var(--background);
104  border-radius: 0.2em;
105} */
106
107.tooltip-container:hover .tooltip {
108  top: -4.5em;
109  opacity: 1;
110  visibility: visible;
111  pointer-events: auto;
112}
113