Skip to content

Commit bd76d4a

Browse files
web-padawanweb-padawan
authored
fix: allow overriding tooltip offset custom CSS properties (#9788)
1 parent a90df2d commit bd76d4a

File tree

6 files changed

+29
-20
lines changed

6 files changed

+29
-20
lines changed

‎packages/tooltip/src/styles/vaadin-tooltip-overlay-base-styles.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import '@vaadin/component-base/src/style-props.js';
77
import { css } from 'lit';
88

99
export const tooltipOverlayStyles = css`
10+
:host {
11+
--_vaadin-tooltip-default-offset: 4px;
12+
}
13+
1014
[part='overlay'] {
1115
max-width: var(--vaadin-tooltip-max-width, 40ch);
1216
padding: var(--vaadin-tooltip-padding, var(--vaadin-padding-container));
@@ -28,22 +32,22 @@ export const tooltipOverlayStyles = css`
2832
2933
:host([position^='top'][top-aligned]) [part='overlay'],
3034
:host([position^='bottom'][top-aligned]) [part='overlay'] {
31-
margin-top: var(--vaadin-tooltip-offset-top, 4px);
35+
margin-top: var(--vaadin-tooltip-offset-top, var(--_vaadin-tooltip-default-offset));
3236
}
3337
3438
:host([position^='top'][bottom-aligned]) [part='overlay'],
3539
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
36-
margin-bottom: var(--vaadin-tooltip-offset-bottom, 4px);
40+
margin-bottom: var(--vaadin-tooltip-offset-bottom, var(--_vaadin-tooltip-default-offset));
3741
}
3842
3943
:host([position^='start'][start-aligned]) [part='overlay'],
4044
:host([position^='end'][start-aligned]) [part='overlay'] {
41-
margin-inline-start: var(--vaadin-tooltip-offset-start, 4px);
45+
margin-inline-start: var(--vaadin-tooltip-offset-start, var(--_vaadin-tooltip-default-offset));
4246
}
4347
4448
:host([position^='start'][end-aligned]) [part='overlay'],
4549
:host([position^='end'][end-aligned]) [part='overlay'] {
46-
margin-inline-end: var(--vaadin-tooltip-offset-end, 4px);
50+
margin-inline-end: var(--vaadin-tooltip-offset-end, var(--_vaadin-tooltip-default-offset));
4751
}
4852
4953
@media (forced-colors: active) {

‎packages/tooltip/src/styles/vaadin-tooltip-overlay-core-styles.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
import { css } from 'lit';
77

88
export const tooltipOverlayStyles = css`
9+
:host {
10+
--_vaadin-tooltip-default-offset: 0;
11+
}
12+
913
[part='overlay'] {
1014
max-width: 40ch;
1115
}
@@ -16,22 +20,22 @@ export const tooltipOverlayStyles = css`
1620
1721
:host([position^='top'][top-aligned]) [part='overlay'],
1822
:host([position^='bottom'][top-aligned]) [part='overlay'] {
19-
margin-top: var(--vaadin-tooltip-offset-top, 0);
23+
margin-top: var(--vaadin-tooltip-offset-top, var(--_vaadin-tooltip-default-offset));
2024
}
2125
2226
:host([position^='top'][bottom-aligned]) [part='overlay'],
2327
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
24-
margin-bottom: var(--vaadin-tooltip-offset-bottom, 0);
28+
margin-bottom: var(--vaadin-tooltip-offset-bottom, var(--_vaadin-tooltip-default-offset));
2529
}
2630
2731
:host([position^='start'][start-aligned]) [part='overlay'],
2832
:host([position^='end'][start-aligned]) [part='overlay'] {
29-
margin-inline-start: var(--vaadin-tooltip-offset-start, 0);
33+
margin-inline-start: var(--vaadin-tooltip-offset-start, var(--_vaadin-tooltip-default-offset));
3034
}
3135
3236
:host([position^='start'][end-aligned]) [part='overlay'],
3337
:host([position^='end'][end-aligned]) [part='overlay'] {
34-
margin-inline-end: var(--vaadin-tooltip-offset-end, 0);
38+
margin-inline-end: var(--vaadin-tooltip-offset-end, var(--_vaadin-tooltip-default-offset));
3539
}
3640
3741
@media (forced-colors: active) {

‎packages/tooltip/test/visual/lumo/screenshots/tooltip/baseline/custom-offset.png‎

4.48 KB
Loading

‎packages/tooltip/test/visual/lumo/tooltip.test.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,4 +77,11 @@ describe('tooltip', () => {
7777
fire(target, 'mouseenter');
7878
await visualDiff(div, 'white-space-pre');
7979
});
80+
81+
it('custom offset', async () => {
82+
element.style.setProperty('--vaadin-tooltip-offset-top', '15px');
83+
await nextUpdate(element);
84+
fire(target, 'mouseenter');
85+
await visualDiff(div, 'custom-offset');
86+
});
8087
});

‎packages/tooltip/theme/lumo/vaadin-tooltip-styles.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
66

77
const tooltipOverlay = css`
88
:host {
9-
--vaadin-tooltip-offset-top: var(--lumo-space-xs);
10-
--vaadin-tooltip-offset-bottom: var(--lumo-space-xs);
11-
--vaadin-tooltip-offset-start: var(--lumo-space-xs);
12-
--vaadin-tooltip-offset-end: var(--lumo-space-xs);
9+
--_vaadin-tooltip-default-offset: var(--lumo-space-xs);
1310
}
1411
1512
[part='overlay'] {

‎packages/vaadin-lumo-styles/src/components/tooltip-overlay.css‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@
66

77
@media lumo_components_tooltip-overlay {
88
:host {
9-
--vaadin-tooltip-offset-top: var(--lumo-space-xs);
10-
--vaadin-tooltip-offset-bottom: var(--lumo-space-xs);
11-
--vaadin-tooltip-offset-start: var(--lumo-space-xs);
12-
--vaadin-tooltip-offset-end: var(--lumo-space-xs);
9+
--_vaadin-tooltip-default-offset: var(--lumo-space-xs);
1310
}
1411

1512
[part='overlay'] {
@@ -27,22 +24,22 @@
2724

2825
:host([position^='top'][top-aligned]) [part='overlay'],
2926
:host([position^='bottom'][top-aligned]) [part='overlay'] {
30-
margin-top: var(--vaadin-tooltip-offset-top, 0);
27+
margin-top: var(--vaadin-tooltip-offset-top, var(--_vaadin-tooltip-default-offset));
3128
}
3229

3330
:host([position^='top'][bottom-aligned]) [part='overlay'],
3431
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
35-
margin-bottom: var(--vaadin-tooltip-offset-bottom, 0);
32+
margin-bottom: var(--vaadin-tooltip-offset-bottom, var(--_vaadin-tooltip-default-offset));
3633
}
3734

3835
:host([position^='start'][start-aligned]) [part='overlay'],
3936
:host([position^='end'][start-aligned]) [part='overlay'] {
40-
margin-inline-start: var(--vaadin-tooltip-offset-start, 0);
37+
margin-inline-start: var(--vaadin-tooltip-offset-start, var(--_vaadin-tooltip-default-offset));
4138
}
4239

4340
:host([position^='start'][end-aligned]) [part='overlay'],
4441
:host([position^='end'][end-aligned]) [part='overlay'] {
45-
margin-inline-end: var(--vaadin-tooltip-offset-end, 0);
42+
margin-inline-end: var(--vaadin-tooltip-offset-end, var(--_vaadin-tooltip-default-offset));
4643
}
4744

4845
@media (forced-colors: active) {

0 commit comments

Comments
 (0)