Tooltip by SteveBloX

1/* Material Design 3 tooltip */
2.tooltip-container {
3  position: relative;
4  background: #e8def8;
5  color: #1d192b;
6  cursor: pointer;
7  transition: all 0.2s;
8  font-size: 17px;
9  padding: 0.7em 1.8em;
10  font-family: Montserrat, sans-serif;
11  border-radius: 50px;
12}
13.tooltip-container .text {
14  font-weight: bold;
15}
16
17.tooltip {
18  transform-origin: center left;
19  scale: 0;
20  position: absolute;
21  top: 130%;
22  left: 50%;
23  transform: translate(-50%, -10px);
24  transition: all 0.25s;
25  background: #f3edf7;
26  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
27  padding: 17px;
28  border-radius: 12px;
29  color: #49454f;
30  min-width: 312px;
31}
32
33.tooltip-container:hover .tooltip {
34  scale: 1;
35}
36
37.tooltip .title {
38  font-weight: bold;
39  font-size: 1em;
40}
41
42.tooltip .content {
43  font-size: 0.85em;
44  font-weight: semibold;
45}
46