8000 Close #30 · altxriainc/kromacss@a3469c4 · GitHub
Skip to content

Commit a3469c4

Browse files
OhsweddOhswedd
committed
Close #30 
1 parent bfe65c3 commit a3469c4

File tree

1 file changed

+136
-145
lines changed

1 file changed

+136
-145
lines changed

‎css/components/tooltip.css‎

Lines changed: 136 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,138 @@
11
/* Base Tooltip */
22
.tooltip {
3-
position: relative;
4-
display: inline-flex;
5-
justify-content: center;
6-
align-items: center;
7-
cursor: pointer;
8-
outline: none; /* Improves accessibility */
9-
}
10-
11-
/* Tooltip Text */
12-
.tooltip-text {
13-
position: absolute;
14-
background-color: var(--neutral-900);
15-
color: var(--neutral-50);
16-
max-height: 0;
17-
padding: 0;
18-
overflow: hidden;
19-
border-radius: var(--radius-md);
20-
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
21-
font-size: clamp(0.75rem, 1vw, 0.875rem);
22-
line-height: 1.2;
23-
opacity: 0;
24-
transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
25-
pointer-events: none;
26-
width: max-content;
27-
z-index: 1000;
28-
display: flex;
29-
align-items: center;
30-
justify-content: center;
31-
white-space: nowrap;
32-
}
33-
34-
/* Show Tooltip on Hover or Focus */
35-
.tooltip:hover .tooltip-text,
36-
.tooltip:focus .tooltip-text {
37-
opacity: 1;
38-
max-height: 200px;
39-
padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
40-
overflow: visible;
41-
}
42-
43-
/* Tooltip Arrow */
44-
.tooltip-text::after {
45-
content: "";
46-
position: absolute;
47-
width: 0;
48-
height: 0;
49-
border-style: solid;
50-
}
51-
52-
/* Tooltip Positioning Variants */
53-
.tooltip-top .tooltip-text {
54-
bottom: calc(100% + 0.5rem);
55-
left: 50%;
56-
transform: translateX(-50%);
57-
}
58-
59-
.tooltip-top .tooltip-text::after {
60-
top: 100%;
61-
left: 50%;
62-
transform: translateX(-50%);
63-
border-width: 0.5rem 0.5rem 0 0.5rem;
64-
border-color: var(--neutral-900) transparent transparent transparent;
65-
}
66-
67-
.tooltip-right .tooltip-text {
68-
top: 50%;
69-
left: calc(100% + 0.5rem);
70-
transform: translateY(-50%);
71-
}
72-
73-
.tooltip-right .tooltip-text::after {
74-
top: 50%;
75-
left: -0.5rem;
76-
transform: translateY(-50%);
77-
border-width: 0.5rem 0.5rem 0.5rem 0;
78-
border-color: transparent var(--neutral-900) transparent transparent;
79-
}
80-
81-
.tooltip-bottom .tooltip-text {
82-
top: calc(100% + 0.5rem);
83-
left: 50%;
84-
transform: translateX(-50%);
85-
}
86-
87-
.tooltip-bottom .tooltip-text::after {
88-
bottom: 100%;
89-
left: 50%;
90-
transform: translateX(-50%);
91-
border-width: 0.5rem 0.5rem 0.5rem 0.5rem;
92-
border-color: transparent transparent var(--neutral-900) transparent;
93-
}
94-
95-
.tooltip-left .tooltip-text {
96-
top: 50%;
97-
right: calc(100% + 0.5rem);
98-
transform: translateY(-50%);
99-
}
100-
101-
.tooltip-left .tooltip-text::after {
102-
top: 50%;
103-
right: -0.5rem;
104-
transform: translateY(-50%);
105-
border-width: 0.5rem 0 0.5rem 0.5rem;
106-
border-color: transparent transparent transparent var(--neutral-900);
107-
}
108-
109-
/* Tooltip Color Variants */
110-
.tooltip-primary .tooltip-text {
111-
background-color: var(--primary);
112-
color: white;
113-
}
114-
115-
.tooltip-secondary .tooltip-text {
116-
background-color: var(--secondary);
117-
color: white;
118-
}
119-
120-
.tooltip-success .tooltip-text {
121-
background-color: var(--success);
122-
color: white;
123-
}
124-
125-
.tooltip-danger .tooltip-text {
126-
background-color: var(--danger);
127-
color: white;
128-
}
129-
130-
.tooltip-warning .tooltip-text {
131-
background-color: var(--warning);
132-
color: var(--neutral-900);
133-
}
134-
135-
.tooltip-info .tooltip-text {
136-
background-color: var(--info);
137-
color: white;
138-
}
139-
140-
/* Accessibility Improvements */
141-
.tooltip:focus .tooltip-text,
142-
.tooltip:active .tooltip-text {
143-
opacity: 1;
144-
max-height: 200px;
145-
padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
146-
overflow: visible;
147-
}
3+
position: relative;
4+
display: inline-flex;
5+
justify-content: center;
6+
align-items: center;
7+
cursor: pointer;
8+
outline: none;
9+
}
10+
11+
/* Tooltip Text */
12+
.tooltip-text {
13+
position: absolute;
14+
background-color: var(--neutral-900);
15+
color: var(--neutral-50);
16+
max-height: 0;
17+
padding: 0;
18+
overflow: hidden;
19+
border-radius: var(--radius-md);
20+
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
21+
font-size: clamp(0.75rem, 1vw, 0.875rem);
22+
line-height: 1.2;
23+
opacity: 0;
24+
transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
25+
pointer-events: none;
26+
width: max-content;
27+
z-index: 1000;
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
white-space: nowrap;
32+
}
33+
34+
/* Show Tooltip on Hover or Focus */
35+
.tooltip:hover .tooltip-text,
36+
.tooltip:focus .tooltip-text {
37+
opacity: 1;
38+
max-height: 200px;
39+
padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
40+
overflow: visible;
41+
}
42+
43+
/* Tooltip Arrow */
44+
.tooltip-text::after {
45+
content: "";
46+
position: absolute;
47+
width: 0;
48+
height: 0;
49+
border-style: solid;
50+
}
51+
52+
/* Position Variants */
53+
[data-position="top"] .tooltip-text {
54+
bottom: calc(100% + 0.5rem);
55+
left: 50%;
56+
transform: translateX(-50%);
57+
}
58+
[data-position="top"] .tooltip-text::after {
59+
top: 100%;
60+
left: 50%;
61+
transform: translateX(-50%);
62+
border-width: 0.5rem 0.5rem 0 0.5rem;
63+
border-color: var(--neutral-900) transparent transparent transparent;
64+
}
65+
66+
[data-position="right"] .tooltip-text {
67+
top: 50%;
68+
left: calc(100% + 0.5rem);
69+
transform: translateY(-50%);
70+
}
71+
[data-position="right"] .tooltip-text::after {
72+
top: 50%;
73+
left: -0.5rem;
74+
transform: translateY(-50%);
75+
border-width: 0.5rem 0.5rem 0.5rem 0;
76+
border-color: transparent var(--neutral-900) transparent transparent;
77+
}
78+
79+
[data-position="bottom"] .tooltip-text {
80+
top: calc(100% + 0.5rem);
81+
left: 50%;
82+
transform: translateX(-50%);
83+
}
84+
[data-position="bottom"] .tooltip-text::after {
85+
bottom: 100%;
86+
left: 50%;
87+
transform: translateX(-50%);
88+
border-width: 0.5rem 0.5rem 0.5rem 0.5rem;
89+
border-color: transparent transparent var(--neutral-900) transparent;
90+
}
91+
92+
[data-position="left"] .tooltip-text {
93+
top: 50%;
94+
right: calc(100% + 0.5rem);
95+
transform: translateY(-50%);
96+
}
97+
[data-position="left"] .tooltip-text::after {
98+
top: 50%;
99+
right: -0.5rem;
100+
transform: translateY(-50%);
101+
border-width: 0.5rem 0 0.5rem 0.5rem;
102+
border-color: transparent transparent transparent var(--neutral-900);
103+
}
104+
105+
/* Color Variants */
106+
[data-variant="primary"] .tooltip-text {
107+
background-color: var(--primary);
108+
color: white;
109+
}
110+
[data-variant="secondary"] .tooltip-text {
111+
background-color: var(--secondary);
112+
color: white;
113+
}
114+
[data-variant="success"] .tooltip-text {
115+
background-color: var(--success);
116+
color: white;
117+
}
118+
[data-variant="danger"] .tooltip-text {
119+
background-color: var(--danger);
120+
color: white;
121+
}
122+
[data-variant="warning"] .tooltip-text {
123+
background-color: var(--warning);
124+
color: var(--neutral-900);
125+
}
126+
[data-variant="info"] .tooltip-text {
127+
background-color: var(--info);
128+
color: white;
129+
}
130+
131+
/* Accessibility Improvements */
132+
.tooltip:focus .tooltip-text,
133+
.tooltip:active .tooltip-text {
134+
opacity: 1;
135+
max-height: 200px;
136+
padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
137+
overflow: visible;
138+
}

0 commit comments

Comments
 (0)