Skip to content

Commit 75ec4f8

Browse files
heiskrCopilot
andauthored
Fix tooltip hover: make tooltips pointer-hoverable (#60301)
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 720b89a commit 75ec4f8

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed

src/content-render/stylesheets/accessibility.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,38 @@
99
word-spacing: inherit !important;
1010
line-height: inherit !important;
1111
}
12+
13+
/* WCAG 1.4.13: Make tooltip content hoverable with the mouse pointer.
14+
Primer's .tooltipped uses pointer-events:none on the ::after pseudo-
15+
element and a 6px margin gap between the trigger and the tooltip.
16+
This makes it impossible to hover the tooltip content itself.
17+
18+
Fix: re-enable pointer-events and replace the directional margin with
19+
a transparent border so the hover hit-area is contiguous while the
20+
visual appearance is unchanged. */
21+
&::after {
22+
pointer-events: auto !important;
23+
}
24+
&.tooltipped-nw::after,
25+
&.tooltipped-n::after,
26+
&.tooltipped-ne::after {
27+
margin-bottom: 0 !important;
28+
border-bottom: 6px solid transparent;
29+
}
30+
&.tooltipped-sw::after,
31+
&.tooltipped-s::after,
32+
&.tooltipped-se::after {
33+
margin-top: 0 !important;
34+
border-top: 6px solid transparent;
35+
}
36+
&.tooltipped-w::after {
37+
margin-right: 0 !important;
38+
border-right: 6px solid transparent;
39+
}
40+
&.tooltipped-e::after {
41+
margin-left: 0 !important;
42+
border-left: 6px solid transparent;
43+
}
1244
}
1345

1446
/* Enhanced focus indicators for high contrast mode */

0 commit comments

Comments
 (0)