Skip to content

Commit 822bacc

Browse files
joedolsonjoedolson
committed
Administration: Add function for tooltips and toggle tips.
Add functions `wp_get_tooltip()` and `wp_get_toggletip()` to support adding these popover interfaces in the core admin. `wp_get_tooltip()` is used as mechanism to expose accessible names when a control has focus or hover, and `wp_get_toggletip()` implements a popover disclosure dialog to provide extended help information. Functions generate accessible markup, written to avoid excess verbosity for screen readers and apply best practices for voice command users as much as possible for icon-only controls. Add an initial implementation of a toggle tip to explain the 'remember me' option on the login screen. Developed in WordPress/wordpress-develop#12212 Props joedolson, oglekler, afercia, davidbaumwald, rajinsharwar, mukesh27, swissspidy, sirlouen, rutviksavsani, wildworks, ayazahmed12, generosus, sergeybiryukov. Fixes #51006, #55343. Built from https://develop.svn.wordpress.org/trunk@62741 git-svn-id: http://core.svn.wordpress.org/trunk@62025 1a063a9b-81f0-0310-95a4-ce76da25c4cd
1 parent 5588282 commit 822bacc

10 files changed

Lines changed: 491 additions & 3 deletions

‎wp-admin/css/wp-tooltip-rtl.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/*! This file is auto-generated */
2+
/* Accessible tooltip component. Markup from wp_get_tooltip(). */
3+
4+
.wp-tooltip {
5+
display: inline-flex;
6+
align-items: center;
7+
vertical-align: middle;
8+
}
9+
10+
/* Toggle and close buttons. */
11+
.wp-tooltip .wp-tooltip__toggle,
12+
.wp-tooltip .wp-tooltip__close {
13+
display: inline-flex;
14+
align-items: center;
15+
justify-content: center;
16+
width: 24px;
17+
height: 24px;
18+
padding: 0;
19+
border: 0;
20+
border-radius: 2px;
21+
background: none;
22+
color: #50575e;
23+
cursor: pointer;
24+
}
25+
26+
.wp-tooltip .wp-tooltip__toggle:hover,
27+
.wp-tooltip .wp-tooltip__toggle:focus,
28+
.wp-tooltip .wp-tooltip__close:hover,
29+
.wp-tooltip .wp-tooltip__close:focus {
30+
color: var(--wp-admin-theme-color, #3858e9);
31+
}
32+
33+
.wp-tooltip .wp-tooltip__toggle:focus,
34+
.wp-tooltip .wp-tooltip__close:focus {
35+
outline: 2px solid transparent;
36+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
37+
}
38+
39+
.wp-tooltip .wp-tooltip__toggle .dashicons {
40+
width: 20px;
41+
height: 20px;
42+
font-size: 20px;
43+
}
44+
45+
.wp-tooltip .wp-tooltip__close .dashicons {
46+
width: 18px;
47+
height: 18px;
48+
font-size: 18px;
49+
}
50+
51+
/* Bubble. No position here, so it falls back to the UA's centered popover without anchoring. */
52+
.wp-tooltip .wp-tooltip__bubble {
53+
max-width: min(280px, calc(100vw - 32px));
54+
margin: auto;
55+
padding: 12px 16px;
56+
overflow: visible;
57+
border: 1px solid #c3c4c7;
58+
border-radius: 4px;
59+
background: #fff;
60+
color: #1d2327;
61+
font-size: 13px;
62+
font-weight: 400;
63+
line-height: 1.5;
64+
text-align: right;
65+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
66+
}
67+
68+
.wp-tooltip.wp-is-tooltip .wp-tooltip__bubble {
69+
background: #000;
70+
color: #f0f0f0;
71+
text-align: center;
72+
padding: 4px 8px;
73+
line-height: 1.4;
74+
}
75+
76+
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__text {
77+
display: block;
78+
padding-inline-end: 24px;
79+
}
80+
81+
.wp-tooltip .wp-tooltip__close {
82+
position: absolute;
83+
top: 6px;
84+
inset-inline-end: 6px;
85+
}
86+
87+
/* Anchor the bubble above its toggle, with a downward arrow. */
88+
@supports (anchor-name: --a) {
89+
.wp-tooltip .wp-tooltip__bubble {
90+
position-area: top;
91+
margin: 0 0 8px;
92+
position-try-fallbacks: flip-block, flip-inline;
93+
}
94+
95+
.wp-tooltip.wp-is-tooltip .wp-tooltip__bubble {
96+
margin: 0;
97+
}
98+
99+
/* Arrow: gray border (::before) under a white fill (::after). */
100+
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before,
101+
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after {
102+
content: "";
103+
position: absolute;
104+
top: 100%;
105+
right: 50%;
106+
width: 0;
107+
height: 0;
108+
border: 8px solid transparent;
109+
border-bottom: 0;
110+
}
111+
112+
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before {
113+
margin-right: -8px;
114+
border-top-color: #c3c4c7;
115+
}
116+
117+
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after {
118+
margin-right: -7px;
119+
border-width: 7px;
120+
border-bottom: 0;
121+
border-top-color: #fff;
122+
}
123+
}

‎wp-admin/css/wp-tooltip-rtl.min.css‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎wp-admin/css/wp-tooltip.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/* Accessible tooltip component. Markup from wp_get_tooltip(). */
2+
3+
.wp-tooltip {
4+
display: inline-flex;
5+
align-items: center;
6+
vertical-align: middle;
7+
}
8+
9+
/* Toggle and close buttons. */
10+
.wp-tooltip .wp-tooltip__toggle,
11+
.wp-tooltip .wp-tooltip__close {
12+
display: inline-flex;
13+
align-items: center;
14+
justify-content: center;
15+
width: 24px;
16+
height: 24px;
17+
padding: 0;
18+
border: 0;
19+
border-radius: 2px;
20+
background: none;
21+
color: #50575e;
22+
cursor: pointer;
23+
}
24+
25+
.wp-tooltip .wp-tooltip__toggle:hover,
26+
.wp-tooltip .wp-tooltip__toggle:focus,
27+
.wp-tooltip .wp-tooltip__close:hover,
28+
.wp-tooltip .wp-tooltip__close:focus {
29+
color: var(--wp-admin-theme-color, #3858e9);
30+
}
31+
32+
.wp-tooltip .wp-tooltip__toggle:focus,
33+
.wp-tooltip .wp-tooltip__close:focus {
34+
outline: 2px solid transparent;
35+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
36+
}
37+
38+
.wp-tooltip .wp-tooltip__toggle .dashicons {
39+
width: 20px;
40+
height: 20px;
41+
font-size: 20px;
42+
}
43+
44+
.wp-tooltip .wp-tooltip__close .dashicons {
45+
width: 18px;
46+
height: 18px;
47+
font-size: 18px;
48+
}
49+
50+
/* Bubble. No position here, so it falls back to the UA's centered popover without anchoring. */
51+
.wp-tooltip .wp-tooltip__bubble {
52+
max-width: min(280px, calc(100vw - 32px));
53+
margin: auto;
54+
padding: 12px 16px;
55+
overflow: visible;
56+
border: 1px solid #c3c4c7;
57+
border-radius: 4px;
58+
background: #fff;
59+
color: #1d2327;
60+
font-size: 13px;
61+
font-weight: 400;
62+
line-height: 1.5;
63+
text-align: left;
64+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
65+
}
66+
67+
.wp-tooltip.wp-is-tooltip .wp-tooltip__bubble {
68+
background: #000;
69+
color: #f0f0f0;
70+
text-align: center;
71+
padding: 4px 8px;
72+
line-height: 1.4;
73+
}
74+
75+
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__text {
76+
display: block;
77+
padding-inline-end: 24px;
78+
}
79+
80+
.wp-tooltip .wp-tooltip__close {
81+
position: absolute;
82+
top: 6px;
83+
inset-inline-end: 6px;
84+
}
85+
86+
/* Anchor the bubble above its toggle, with a downward arrow. */
87+
@supports (anchor-name: --a) {
88+
.wp-tooltip .wp-tooltip__bubble {
89+
position-area: top;
90+
margin: 0 0 8px;
91+
position-try-fallbacks: flip-block, flip-inline;
92+
}
93+
94+
.wp-tooltip.wp-is-tooltip .wp-tooltip__bubble {
95+
margin: 0;
96+
}
97+
98+
/* Arrow: gray border (::before) under a white fill (::after). */
99+
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before,
100+
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after {
101+
content: "";
102+
position: absolute;
103+
top: 100%;
104+
left: 50%;
105+
width: 0;
106+
height: 0;
107+
border: 8px solid transparent;
108+
border-bottom: 0;
109+
}
110+
111+
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before {
112+
margin-left: -8px;
113+
border-top-color: #c3c4c7;
114+
}
115+
116+
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after {
117+
margin-left: -7px;
118+
border-width: 7px;
119+
border-bottom: 0;
120+
border-top-color: #fff;
121+
}
122+
}

‎wp-admin/css/wp-tooltip.min.css‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)