Skip to content

Commit 5bd84ba

Browse files
mlmoravekmlmoravek
authored
fix(tooltip): adjust tooltip position (#151)
1 parent 5bb31da commit 5bd84ba

File tree

1 file changed

+145
-145
lines changed

1 file changed

+145
-145
lines changed

‎src/assets/scss/components/_tooltip.scss‎

Lines changed: 145 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,14 @@ $tooltip-zindex: $zindex-tooltip;
4343
position: relative;
4444
display: inline-flex;
4545

46+
// Color variants
47+
@each $name, $color in $theme-colors {
48+
.variant-#{$name} {
49+
--#{$prefix}tooltip-color: var(--#{$prefix}#{$name}-contrast);
50+
--#{$prefix}tooltip-bg: var(--#{$prefix}#{$name});
51+
}
52+
}
53+
4654
.tooltip-trigger {
4755
width: 100%;
4856
}
@@ -79,183 +87,175 @@ $tooltip-zindex: $zindex-tooltip;
7987
white-space: normal;
8088
width: var(--#{$prefix}tooltip-content-multiline-width);
8189
}
82-
}
83-
84-
// Color variants
85-
@each $name, $color in $theme-colors {
86-
.variant-#{$name} {
87-
--#{$prefix}tooltip-color: var(--#{$prefix}#{$name}-contrast);
88-
--#{$prefix}tooltip-bg: var(--#{$prefix}#{$name});
89-
}
90-
}
9190

92-
// Positioning
93-
.position {
94-
&-top {
95-
top: auto;
96-
right: auto;
97-
bottom: calc(
98-
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
99-
);
100-
left: 50%;
101-
transform: translateX(-50%);
102-
103-
&::before {
104-
top: 100%;
91+
// Positioning
92+
&.position {
93+
&-top {
94+
top: auto;
10595
right: auto;
106-
bottom: auto;
96+
bottom: calc(
97+
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
98+
);
10799
left: 50%;
108100
transform: translateX(-50%);
109-
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
110-
border-right: $tooltip-arrow-size solid transparent;
111-
border-left: $tooltip-arrow-size solid transparent;
112-
}
113-
}
114101

115-
&-bottom {
116-
top: calc(
117-
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
118-
);
119-
right: auto;
120-
bottom: auto;
121-
left: 50%;
122-
transform: translateX(-50%);
102+
&::before {
103+
top: 100%;
104+
right: auto;
105+
bottom: auto;
106+
left: 50%;
107+
transform: translateX(-50%);
108+
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
109+
border-right: $tooltip-arrow-size solid transparent;
110+
border-left: $tooltip-arrow-size solid transparent;
111+
}
112+
}
123113

124-
&::before {
125-
top: auto;
114+
&-bottom {
115+
top: calc(
116+
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
117+
);
126118
right: auto;
127-
bottom: 100%;
119+
bottom: auto;
128120
left: 50%;
129121
transform: translateX(-50%);
130-
border-right: $tooltip-arrow-size solid transparent;
131-
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
132-
border-left: $tooltip-arrow-size solid transparent;
133-
}
134-
}
135122

136-
&-right {
137-
top: 50%;
138-
right: auto;
139-
bottom: auto;
140-
left: calc(
141-
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
142-
);
143-
transform: translateY(-50%);
123+
&::before {
124+
top: auto;
125+
right: auto;
126+
bottom: 100%;
127+
left: 50%;
128+
transform: translateX(-50%);
129+
border-right: $tooltip-arrow-size solid transparent;
130+
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
131+
border-left: $tooltip-arrow-size solid transparent;
132+
}
133+
}
144134

145-
&::before {
135+
&-right {
146136
top: 50%;
147-
right: 100%;
137+
right: auto;
148138
bottom: auto;
149-
left: auto;
139+
left: calc(
140+
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
141+
);
150142
transform: translateY(-50%);
151-
border-top: $tooltip-arrow-size solid transparent;
152-
border-right: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
153-
border-bottom: $tooltip-arrow-size solid transparent;
154-
}
155-
}
156143

157-
&-left {
158-
top: 50%;
159-
right: calc(
160-
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
161-
);
162-
bottom: auto;
163-
left: auto;
164-
transform: translateY(-50%);
144+
&::before {
145+
top: 50%;
146+
right: 100%;
147+
bottom: auto;
148+
left: auto;
149+
transform: translateY(-50%);
150+
border-top: $tooltip-arrow-size solid transparent;
151+
border-right: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
152+
border-bottom: $tooltip-arrow-size solid transparent;
153+
}
154+
}
165155

166-
&::before {
156+
&-left {
167157
top: 50%;
168-
right: auto;
158+
right: calc(
159+
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
160+
);
169161
bottom: auto;
170-
left: 100%;
162+
left: auto;
171163
transform: translateY(-50%);
172-
border-top: $tooltip-arrow-size solid transparent;
173-
border-bottom: $tooltip-arrow-size solid transparent;
174-
border-left: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
175-
}
176-
}
177164

178-
&-top-right {
179-
top: auto;
180-
right: 0;
181-
bottom: calc(
182-
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
183-
);
184-
left: auto;
185-
transform: translateX(50%);
186-
187-
&::before {
188-
top: 100%;
189-
right: auto;
190-
bottom: auto;
191-
left: 50%;
192-
transform: translateX(-50%);
193-
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
194-
border-right: calc($tooltip-arrow-size * 2) solid transparent;
195-
border-left: 0 solid transparent;
165+
&::before {
166+
top: 50%;
167+
right: auto;
168+
bottom: auto;
169+
left: 100%;
170+
transform: translateY(-50%);
171+
border-top: $tooltip-arrow-size solid transparent;
172+
border-bottom: $tooltip-arrow-size solid transparent;
173+
border-left: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
174+
}
196175
}
197-
}
198176

199-
&-top-left {
200-
top: auto;
201-
right: auto;
202-
bottom: calc(
203-
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
204-
);
205-
left: 0;
206-
transform: translateX(-50%);
207-
208-
&::before {
209-
top: 100%;
210-
right: auto;
211-
bottom: auto;
212-
left: 50%;
213-
transform: translateX(-50%);
214-
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
215-
border-right: 0 solid transparent;
216-
border-left: calc($tooltip-arrow-size * 2) solid transparent;
177+
&-top-right {
178+
top: auto;
179+
right: 0;
180+
bottom: calc(
181+
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
182+
);
183+
left: auto;
184+
transform: translateX(50%);
185+
186+
&::before {
187+
top: 100%;
188+
right: auto;
189+
bottom: auto;
190+
left: 50%;
191+
transform: translateX(-50%);
192+
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
193+
border-right: calc($tooltip-arrow-size * 2) solid transparent;
194+
border-left: 0 solid transparent;
195+
}
217196
}
218-
}
219-
220-
&-bottom-right {
221-
top: calc(
222-
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
223-
);
224-
right: 0;
225-
bottom: auto;
226-
left: auto;
227-
transform: translateX(50%);
228197

229-
&::before {
198+
&-top-left {
230199
top: auto;
231200
right: auto;
232-
bottom: 100%;
233-
left: 50%;
201+
bottom: calc(
202+
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
203+
);
204+
left: 0;
234205
transform: translateX(-50%);
235-
border-right: calc($tooltip-arrow-size * 2) solid transparent;
236-
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
237-
border-left: 0 solid transparent;
206+
207+
&::before {
208+
top: 100%;
209+
right: auto;
210+
bottom: auto;
211+
left: 50%;
212+
transform: translateX(-50%);
213+
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
214+
border-right: 0 solid transparent;
215+
border-left: calc($tooltip-arrow-size * 2) solid transparent;
216+
}
238217
}
239-
}
240218

241-
&-bottom-left {
242-
top: calc(
243-
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
244-
);
245-
right: auto;
246-
bottom: auto;
247-
left: 0;
248-
transform: translateX(-50%);
219+
&-bottom-right {
220+
top: calc(
221+
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
222+
);
223+
right: 0;
224+
bottom: auto;
225+
left: auto;
226+
transform: translateX(50%);
227+
228+
&::before {
229+
top: auto;
230+
right: auto;
231+
bottom: 100%;
232+
left: 50%;
233+
transform: translateX(-50%);
234+
border-right: calc($tooltip-arrow-size * 2) solid transparent;
235+
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
236+
border-left: 0 solid transparent;
237+
}
238+
}
249239

250-
&::before {
251-
top: auto;
240+
&-bottom-left {
241+
top: calc(
242+
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
243+
);
252244
right: auto;
253-
bottom: 100%;
254-
left: 50%;
245+
bottom: auto;
246+
left: 0;
255247
transform: translateX(-50%);
256-
border-right: 0 solid transparent;
257-
border-left: calc($tooltip-arrow-size * 2) solid transparent;
258-
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
248+
249+
&::before {
250+
top: auto;
251+
right: auto;
252+
bottom: 100%;
253+
left: 50%;
254+
transform: translateX(-50%);
255+
border-right: 0 solid transparent;
256+
border-left: calc($tooltip-arrow-size * 2) solid transparent;
257+
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
258+
}
259259
}
260260
}
261261
}

0 commit comments

Comments
 (0)