Skip to content

Commit 6dae584

Browse files
authored
feat(popup): multiline tooltip variation
This PR allows multiline tooltips via new multiline variation to be set in data-variation. However the data-tooltip text has to be cleverly prepared to make this work completely. - non breaking spaces have to use a non visible character like U+A0 (see https://qwerty.dev/whitespace/) - newlines to break lines / trigger a tooltip newline https://jsfiddle.net/lubber/Lk2sp8nq/15/
1 parent d296b9a commit 6dae584

File tree

3 files changed

+9
-0
lines changed

3 files changed

+9
-0
lines changed

src/definitions/modules/popup.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -475,6 +475,12 @@
475475
display: none;
476476
}
477477
}
478+
479+
& when (@variationPopupMultiline) {
480+
[data-tooltip][data-variation~="multiline"]::after {
481+
white-space: @multilineWhiteSpace;
482+
}
483+
}
478484
}
479485

480486
/*--------------

src/themes/default/globals/variation.variables

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -610,6 +610,7 @@
610610
@variationPopupFluid: true;
611611
@variationPopupFlowing: true;
612612
@variationPopupFixed: true;
613+
@variationPopupMultiline: true;
613614
@variationPopupSizes: @variationAllSizes;
614615
@variationPopupColors: @variationAllColors;
615616

src/themes/default/modules/popup.variables

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@
116116
Variations
117117
--------------------*/
118118

119+
@multilineWhiteSpace: pre-line;
120+
119121
/* Wide */
120122
@wideWidth: 350px;
121123
@veryWideWidth: 550px;

0 commit comments

Comments
 (0)