Skip to content

Commit 42609e2

Browse files
authored
fix(tooltips): prevent hover pop-up reappearance on click (@byseif21) (monkeytypegame#6831)
### Description tooltip pop-ups were reappearing on click when interacting with various clickable elements (e.g., tags in results table, test result buttons, account page actions).
1 parent 68d2370 commit 42609e2

File tree

2 files changed

+12
-1
lines changed

2 files changed

+12
-1
lines changed

frontend/src/styles/core.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -466,3 +466,15 @@ key {
466466
font-size: var(--balloon-font-size);
467467
line-height: var(--balloon-font-size);
468468
}
469+
470+
// this here to prevent tooltips from showing when an element is focused via mouse click
471+
// to avoid reappearing popups after clicks, WITHOUT breaking keyboard nav.
472+
// so shortly we show balloon tooltips on hover and keyboard focus only. not on mouse focus!
473+
@supports selector(:focus-visible) {
474+
[aria-label][data-balloon-pos]:focus:not(:focus-visible):not(:hover)::before,
475+
[aria-label][data-balloon-pos]:focus:not(:focus-visible):not(:hover)::after {
476+
opacity: 0 !important;
477+
visibility: hidden !important;
478+
pointer-events: none !important;
479+
}
480+
}

frontend/src/ts/pages/settings.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1008,7 +1008,6 @@ $(".pageSettings .section[data-config-name='funbox'] .buttons").on(
10081008
const funbox = $(e.currentTarget).attr("data-config-value") as FunboxName;
10091009
Funbox.toggleFunbox(funbox);
10101010
setActiveFunboxButton();
1011-
$(e.currentTarget).blur();
10121011
}
10131012
);
10141013

0 commit comments

Comments
 (0)