Add an accessible tooltip mechanism, and use it for the "Remember Me" login tooltip ( #55343 & #51006 )#12212
Conversation
Add a reusable, accessible tooltip mechanism built on the native Popover API and CSS anchor positioning. wp_get_tooltip() returns a help toggle and an associated popover; the content is linked to the toggle with aria-describedby and is dismissable via Escape, a click outside, or a visible close button. Includes the wp-tooltip stylesheet and unit tests. See #51006.
Add a help tooltip next to the "Remember Me" checkbox on the login form, explaining the option and its security implications. The text is filterable via the login_remember_me_help_text filter. Built using wp_get_tooltip(). See #55343.
|
Hi there! 👋 Thank you for your contribution to WordPress! 💖 It looks like this is your first pull request to No one monitors this repository for new pull requests. Pull requests must be attached to a Trac ticket to be considered for inclusion in WordPress Core. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description. Pull requests are never merged on GitHub. The WordPress codebase continues to be managed through the SVN repository that this GitHub repository mirrors. Please feel free to open pull requests to work on any contribution you are making. More information about how GitHub pull requests can be used to contribute to WordPress can be found in the Core Handbook. Please include automated tests. Including tests in your pull request is one way to help your patch be considered faster. To learn about WordPress' test suites, visit the Automated Testing page in the handbook. If you have not had a chance, please review the Contribute with Code page in the WordPress Core Handbook. The Developer Hub also documents the various coding standards that are followed:
Thank you, |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
Trac tickets:
Summary
#55343 needs a tooltip next to the Remember Me checkbox on
wp-login.php, and theticket history makes it dependent on #51006 (a reusable accessible-tooltip
mechanism). This PR resolves both together:
wp_get_tooltip()plus a
wp-tooltipstylesheet — built on the native Popover API + CSS anchorpositioning, matching the final direction agreed in #51006.
filterable copy.
Approach
Esc, light-dismiss, focusreturn — so there is no JavaScript to ship or maintain.
position-area: top) places the bubble above its toggle using thepopover's implicit anchor, so multiple tooltips on one page each anchor to their own toggle
with no per-instance IDs. Gated behind
@supports (anchor-name: --a).pointer (
wp-pointer.css).wp_get_tooltip( $content, $args )returns the markup (content-first signature, mirroringwp_get_admin_notice()); the login template echoes it. Single function, return-only — thesame shape as
wp_required_field_indicator().login_remember_me_help_text(return''to remove).Accessibility
Implements the accessible-tooltip specification from #51006 (comment #15) in full, and
targets WCAG 2.2:
role="tooltip",aria-haspopup, oraria-live.aria-describedbypointing to atext-only element, so the description is the help sentence and nothing else.
Esc, click-outside, and a visible close button that returns focus to thetrigger without re-opening it.
Escworks in every engine.outlineso focus staysvisible in Windows High Contrast / forced-colors mode (2.4.7).
titleattribute.Files changed
src/wp-includes/general-template.phpwp_get_tooltip()— returns accessible tooltip markup.src/wp-admin/css/wp-tooltip.csswp-tooltipcomponent stylesheet.src/wp-includes/script-loader.phpwp-tooltipstyle and makes theloginstyles depend on it.src/wp-login.phpwp_get_tooltip().tests/phpunit/tests/general/wpGetTooltip.phpwp_get_tooltip().Testing instructions
/wp-login.php.?help icon appears after "Remember Me". Click it (or focus + Enter) → tooltip opens withthe security copy.
×button,Esc, or clicking outside.Esccloses and focus returns to the icon.(not the word "Close"), and the bubble is not announced as a "tooltip".
npm run test:php -- --filter Tests_General_wpGetTooltip(7 tests).Screenshots
Tooltip open, captured on each real engine:
Chromium:

Safari / W

ebKit :
Firefox :

Use of AI Tools
AI assistance: Yes
Tool: Claude Code
Model: Opus 4.8 with 1M context
Used for: Initial code skeleton and unit tests; final implementation and tests were reviewed and edited by me.
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.