Skip to content

Commit 5da44d8

Browse files
lubber-delubber-de
authored
feat(tooltip): match tooltip appearance to default popups
Make tooltips appear exactly the same as default popups CSS Tooltips appeared different and a bit uglier/harder than the default JS popup variants, which this PR now unifies
1 parent b6b51ca commit 5da44d8

File tree

2 files changed

+41
-37
lines changed

2 files changed

+41
-37
lines changed

‎src/definitions/modules/popup.less

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,6 @@
8686
width: @arrowSize;
8787
height: @arrowSize;
8888
background: @tooltipArrowBackground;
89-
transform: rotate(45deg);
9089
z-index: @arrowZIndex;
9190
box-shadow: @tooltipArrowBoxShadow;
9291
}
@@ -114,23 +113,6 @@
114113
z-index: @tooltipZIndex;
115114
}
116115

117-
/* Default Position (Top Center) */
118-
[data-tooltip]:not([data-position])::before {
119-
top: auto;
120-
right: auto;
121-
bottom: 100%;
122-
left: 50%;
123-
background: @tooltipArrowBottomBackground;
124-
margin-left: @tooltipArrowHorizontalOffset;
125-
margin-bottom: -@tooltipArrowVerticalOffset;
126-
}
127-
[data-tooltip]:not([data-position])::after {
128-
left: 50%;
129-
transform: translateX(-50%);
130-
bottom: 100%;
131-
margin-bottom: @tooltipDistanceAway;
132-
}
133-
134116
/* Animation */
135117
[data-tooltip]::before,
136118
[data-tooltip]::after {
@@ -141,8 +123,16 @@
141123
transform @tooltipDuration @tooltipEasing,
142124
opacity @tooltipDuration @tooltipEasing;
143125
}
126+
[data-tooltip]::after,
127+
[data-tooltip]:hover::before {
128+
transition-delay: @tooltipDelay;
129+
}
130+
[data-tooltip]::before,
131+
[data-tooltip]:hover::after {
132+
transition-delay: 0s;
133+
}
144134
[data-tooltip]::before {
145-
transform: rotate(45deg) scale(0) !important;
135+
transform: rotate(45deg) scale(@tooltipScaleInit);
146136
transform-origin: center top;
147137
}
148138
[data-tooltip]::after {
@@ -155,26 +145,27 @@
155145
opacity: 1;
156146
}
157147
[data-tooltip]:hover::before {
158-
transform: rotate(45deg) scale(1) !important;
148+
transform: rotate(45deg) scale(1);
159149
}
160150

161151
/* Animation Position */
162-
[data-tooltip]::after,
152+
[data-tooltip]:not([data-position])::after,
163153
[data-tooltip][data-position="top center"]::after,
164154
[data-tooltip][data-position="bottom center"]::after {
165-
transform: translateX(-50%) scale(0) !important;
155+
transform: translateX(-50%) scale(@tooltipScaleInit);
166156
}
167-
[data-tooltip]:hover::after,
157+
[data-tooltip]:not([data-position]):hover::after,
158+
[data-tooltip][data-position="top center"]:hover::after,
168159
[data-tooltip][data-position="bottom center"]:hover::after {
169-
transform: translateX(-50%) scale(1) !important;
160+
transform: translateX(-50%) scale(1);
170161
}
171162
[data-tooltip][data-position="left center"]::after,
172163
[data-tooltip][data-position="right center"]::after {
173-
transform: translateY(-50%) scale(0) !important;
164+
transform: translateY(-50%) scale(@tooltipScaleInit);
174165
}
175166
[data-tooltip][data-position="left center"]:hover::after,
176167
[data-tooltip][data-position="right center"]:hover::after {
177-
transform: translateY(-50%) scale(1) !important;
168+
transform: translateY(-50%) scale(1);
178169
// https://github.com/fomantic/Fomantic-UI/pull/1537
179170
// stylelint-disable-next-line property-no-vendor-prefix
180171
-moz-transform: translateY(-50%) scale(1.0001) !important;
@@ -183,13 +174,13 @@
183174
[data-tooltip][data-position="top right"]::after,
184175
[data-tooltip][data-position="bottom left"]::after,
185176
[data-tooltip][data-position="bottom right"]::after {
186-
transform: scale(0) !important;
177+
transform: scale(@tooltipScaleInit);
187178
}
188179
[data-tooltip][data-position="top left"]:hover::after,
189180
[data-tooltip][data-position="top right"]:hover::after,
190181
[data-tooltip][data-position="bottom left"]:hover::after,
191182
[data-tooltip][data-position="bottom right"]:hover::after {
192-
transform: scale(1) !important;
183+
transform: scale(1);
193184
}
194185
& when (@variationPopupFixed) {
195186
[data-tooltip][data-variation~="fixed"]::after {
@@ -215,11 +206,11 @@
215206

216207
/* Arrow */
217208
[data-tooltip][data-inverted]::before {
218-
box-shadow: none !important;
209+
box-shadow: none;
219210
}
220211

221212
/* Arrow Position */
222-
[data-tooltip][data-inverted]::before {
213+
[data-tooltip]:not([data-position])[data-inverted]::before {
223214
background: @invertedArrowBottomBackground;
224215
}
225216

@@ -241,15 +232,16 @@
241232
background: @arrowBottomBackground;
242233
}
243234
& when (@variationPopupCenter) {
244-
/* Top Center */
235+
/* Top Center (default) */
236+
[data-tooltip]:not([data-position])::after,
245237
[data-position="top center"][data-tooltip]::after {
246238
top: auto;
247239
right: auto;
248240
left: 50%;
249241
bottom: 100%;
250-
transform: translateX(-50%);
251242
margin-bottom: @tooltipDistanceAway;
252243
}
244+
[data-tooltip]:not([data-position])::before,
253245
[data-position="top center"][data-tooltip]::before {
254246
top: auto;
255247
right: auto;
@@ -310,7 +302,6 @@
310302
right: auto;
311303
left: 50%;
312304
top: 100%;
313-
transform: translateX(-50%);
314305
margin-top: @tooltipDistanceAway;
315306
}
316307
[data-position="bottom center"][data-tooltip]::before {
@@ -362,7 +353,6 @@
362353
right: 100%;
363354
top: 50%;
364355
margin-right: @tooltipDistanceAway;
365-
transform: translateY(-50%);
366356
}
367357
[data-position="left center"][data-tooltip]::before {
368358
right: 100%;
@@ -379,7 +369,6 @@
379369
left: 100%;
380370
top: 50%;
381371
margin-left: @tooltipDistanceAway;
382-
transform: translateY(-50%);
383372
}
384373
[data-position="right center"][data-tooltip]::before {
385374
left: 100%;
@@ -454,6 +443,19 @@
454443
}
455444
}
456445

446+
[data-position="top left"][data-tooltip]::after {
447+
transform-origin: bottom left;
448+
}
449+
[data-position="top right"][data-tooltip]::after {
450+
transform-origin: bottom right;
451+
}
452+
[data-position="bottom left"][data-tooltip]::after {
453+
transform-origin: top left;
454+
}
455+
[data-position="bottom right"][data-tooltip]::after {
456+
transform-origin: top right;
457+
}
458+
457459
& when (@variationPopupBasic) {
458460
/* --------------
459461
Basic
@@ -822,7 +824,7 @@
822824
}
823825
.ui.inverted.popup::before {
824826
background-color: @invertedArrowColor;
825-
box-shadow: none !important;
827+
box-shadow: none;
826828
}
827829
}
828830

‎src/themes/default/modules/popup.variables

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,10 @@
7979
@tooltipLineHeight: @lineHeight;
8080
@tooltipDistanceAway: @relative7px;
8181
@tooltipZIndex: 1900;
82-
@tooltipDuration: @defaultDuration;
82+
@tooltipDuration: 0.2s;
8383
@tooltipEasing: @defaultEasing;
84+
@tooltipDelay: 0.04s;
85+
@tooltipScaleInit: 0.8;
8486

8587
/* Inverted */
8688
@tooltipInvertedBackground: @invertedBackground;

0 commit comments

Comments
 (0)