Tooltip by csemszepp

1.container {
2  background-color: black;
3  color: rgb(132, 170, 218);
4  font-family: "Inter", sans-serif;
5  font-size: 14px;
6}
7.container::before {
8  content: "Hover or tap the icons.";
9  font-size: 14px;
10  position: absolute;
11  left: 50%;
12  top: calc(50% - 100px);
13  transform: translate(-50%, -50%);
14}
15.container::after {
16  position: absolute;
17  bottom: 36px;
18  right: 36px;
19}
20#wrapper {
21  display: flex;
22  align-items: center;
23  justify-content: center;
24  position: absolute;
25  inset: 0;
26}
27header {
28  width: 340px;
29  padding: 0 16px;
30  display: flex;
31  border: 1px solid rgb(83, 100, 124);
32  border-radius: 16px;
33}
34.iconDiv {
35  height: 36px;
36  width: 36px;
37  margin-top: 20px;
38  margin-bottom: 20px;
39  margin-left: 4px;
40  padding: 4px;
41  border-radius: 8px;
42  display: inline-flex;
43  align-items: center;
44  white-space: nowrap;
45  overflow: hidden;
46  cursor: pointer;
47  transition: width 300ms ease-in-out 0s, background-color 300ms linear 200ms;
48}
49.iconSVG {
50  height: 36px;
51  aspect-ratio: 1 / 1;
52}
53.iconDiv:hover,
54.iconDiv:focus-visible {
55  width: 142px;
56  background-color: rgb(34, 52, 77);
57  transition: width 300ms ease-in-out 0s, background-color 100ms linear 0s;
58}
59.iconDiv:focus-visible {
60  outline: 1px solid rgb(34, 52, 77);
61  outline-offset: 4px;
62}
63.iconDiv:active {
64  opacity: 0.9;
65}
66.iconDiv::after {
67  content: attr(tooltip);
68  margin-left: 12px;
69  animation: fadeIn 600ms linear forwards;
70}
71.spacer {
72  flex-grow: 1;
73}
74.divider {
75  height: 36px;
76  width: 1px;
77  margin: 24px 18px;
78  background-color: rgb(83, 100, 124);
79}
80
81@keyframes fadeIn {
82  0% {
83    opacity: 0;
84  }
85  50% {
86    opacity: 0;
87  }
88  100% {
89    opacity: 1;
90  }
91}
92.text {
93  padding-left: 10px;
94}
95